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随 着 互联 网 技术 的 发 展 ， 前 端 技术 的 发 展 也 进入 一 个 新 的 阶段 。 早 期 的 网 页 开发 是 由 
后 端 主导 的 ， 前 端的 操作 局 限于 DOM 区 域 。 随 着 基础 设置 的 不 断 完 善 以 及 代码 封装 层级 
的 不 断 提 高 ， 使 得 前 端 能 够 完成 的 事 越 来 越 多 ， 前 端 所 需 解决 的 业务 场景 也 越 来 越 复杂 。 

近 几 年 ， 前 端 已 经 发 展 到 跨 端 、 跨 界面 的 革新 阶段 ， 目 前 主流 以 基于 MVVM、Virtual 
DOM、 前 后 端 同 构 技术 进行 开发 的 项 目 居多 ， 实 现 的 方向 也 多 种 多 样 。React 就 是 在 此 基 
础 上 发 展 起 来 的 框架 ， 独 特 的 设计 思想 所 带 来 的 革命 性 创新 让 其 成 为 前 端 新 技术 的 代表 。 

目前 市 场 上 关于 React 开发 及 实践 的 图 书 不 少 ， 但 真正 从 零 基础 搭建 开始 ， 通 过 语法 
和 小 示例 指导 读者 提高 开发 水 平 的 图 书 却 很 少 。 本 书 便 是 以 实战 为 主旨 ， 通 过 React 开发 
中 所 需要 涉及 的 基础 知识 和 两 个 完整 的 项 目 案例 ， 让 读者 全 面 、 深 入 、 透 彻 地 理解 React 
开发 的 技术 栈 的 整合 使 用 。 


本 书 的 技术 点 

本 书 涵盖 npm、Node.js、webpack、ES6、React、JSX、Redux、Jest、Enzyme、Hooks、 
ESLint、Chrome 插件 、JavaScript、CSS、ImmutableJS、Perf 等 热门 技术 及 整个 技术 站 框架 
的 整合 使 用 。 

本 书 最 后 使 用 Reacttwebpack+ES6 组 合 形式 , 开发 了 笔记 本 和 购物 车 两 个 完整 项 目 。 读 
者 将 案例 稍 加 修改 ， 便 可 用 于 实际 项 目 开发 实践 中 。 


本 书 的 内 容 


本 书 共有 14 章 ， 由 浅 到 深 地 介绍 React 技术 栈 中 的 主要 技术 ， 主 要 内 容 分 为 基础 篇 、 进 
阶 篇 和 实战 篇 ， 每 一 篇 内 容 又 分 成 若干 章节 来 介绍 。 

第 1 篇 基础 篇 (第 1~3 章 ) 

介绍 React 的 前 世 今生 ， 以 及 React 开发 中 涉及 的 基本 概念 , 包括 React 的 开发 环境 和 开 
发 工具 、React 的 基本 用 法 。 每 个 知识 点 都 有 配套 的 源 代码 示例 。 

第 2 篇 进 阶 篇 (第 4~12 章 ) 

深入 介绍 React 的 几 个 重要 概念 ， 包 括 React 组 件 、React 事件 系统 、React 原理 、 数 据 
管理 、React 架构 、React 服务 端 泻 染 等 。 每 章 都 配 有 大 量 示例 代码 ， 保 证 读者 学 以 致 用 。 
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第 3 篇 实战 篇 (第 13 一 14 章 ) 
本 篇 通过 笔记 本 和 购物 车 两 个 项 目 整合 使 用 React 技术 栈 ， 包 括 React Router、Redux、 
SSR， 每 一 个 技术 都 配 有 详细 的 项 目 实战 演示 。 


关于 封面 照片 


封面 照片 由 蜂鸟 网 的 摄影 家 ptwkzj 先生 友情 提供 ， 在 此 表示 衷心 感谢 。 


读者 对 象 


有 一 定 的 HIML、CSS、JavaScript 基础 的 网 页 开发 人 员 ; 
希望 全 面 学 习 React 开发 的 前 端 开 发 人 员 ; 

希望 提高 项 目 开发 水 平 的 人 员 ; 

前 端 开 发 培训 机 构 的 学 员 ; 

软件 开发 项 目 经 理 ; 

需要 一 本 案头 必 备 查询 手册 的 人 员 。 


本 书 作者 


本 书 第 1~6 章 由 刘 江 虹 完 成 ， 第 7~14 章 由 赵 荣 娇 完成 。 
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第 1 章 
< React 的 前 世 今 生 > 


时 间 追 溯 到 20 世纪 90 年 代 , 网 景 浏览 器 的 诞生 给 互联 网 世界 填写 了 浓 墨 的 一 笔 , 用 户 可 
以 在 浏览 器 上 查阅 信息 、 分 享 信息 ， 以 及 和 浏览 器 进行 交互 等 ,当时 网 景 浏览 器 在 市 场 上 的 份 
额 是 占据 第 一 的 。 后 来 微软 为 了 瓜分 市 场 ， 推 出 了 正 浏览 器 ,凭借 Windows 系统 的 用 户 量 把 
网 景 打败 。 就 在 微软 觉得 稳 坐 天 下 的 时 候 ，Firefox 以 及 Chrome 等 优秀 浏览 器 的 出 现 ， 打 破 了 
下 的 市 场 垄 断 。 可 见 产 品 是 需要 不 断 创新 、 不 断 成 长 的 ， 故 步 自 封 终究 会 被 超越 。 

JavaScript 的 运行 环境 就 是 浏览 器 ， 其 实 前 端 框架 也 一 直 处 在 一 个 纷争 的 世界 。 目 前 市 面 
上 各 种 xxx.js 的 出 现 ， 包 括 Emberjs、Angularjs、Backbone.js、Knockoutjs、Reactjs、Vuejs 
等 ， 也 是 纷纷 扰 扰 。 前 端 开发 在 目前 这 个 互联 网 环境 下 还 是 一 个 大 的 趋势 ， 以 JavaScript 为 基 
础 语言 的 前 端 框 架 层 出 不 穷 , 前 端 技术 的 更 新 也 非常 之 快 。 当 今 前 端 框架 格局 ,就 上 述 提 到 的 
框架 ， 可 以 说 Angular、Vue 和 React 三 足 易 立 。 本 书 主要 介绍 React。 


刀 耕 火种 的 年 代 


所 谓 刀 耕 火 种 ， 就 是 在 Web 开发 时 期， 技术 和 工具 还 不 成 熟 ，Web 开发 功能 和 用 户 体验 
非常 有 限 ，Web 开发 人 员 使 用 古老 的 工具 耕耘 着 Web 这 片 广阔 的 天 地 。 

追溯 到 Web1.0 时 代 ， 当 时 的 Web 整体 架构 非常 简单 ， 页 面 基本 由 Server 端 生成 ， 然 后 
返回 给 浏览 器 ， 页 面 的 呈现 也 特别 粗糙 。 最 初 Web 开发 是 不 分 前 后 端的 ， 所 有 的 巡 辑 都 是 在 
服务 器 端 生成 。 如 果 业 务 逻 辑 比 较 简 单 ， 那 这 种 方式 对 于 开发 人 员 来 说 是 可 以 接受 的 。 如 果 业 
务 罗 辑 非常 复杂 ， 这 样 会 出 现 很 多 问题 ， 最 大 的 一 个 缺点 就 是 关系 如 果 变 得 复杂 ， 就 会 导致 
Server 非常 腔 肿 ， 条 理 不 清晰 。 

直到 MVC 时代 的 到 来 ， 以 后 端 作为 出 发 点 ， 开 始 细 化 模块 功能 ， 这 个 时 代 催 生 了 一 些 经 
典 的 MVC 框架 ， 比 如 Structs、Spring 等 。M (Model) 层 负责 数据 处 理 ，V (View) 层 负责 
界面 呈现 ，C (Controller) 层 负 责 处 理 用 户 交 互 功能 。 这 种 模式 的 优点 在 于 开发 人 员 可 以 各 司 
其 职 ， 互 不 干涉 ， 分 工 明 确 。 当 然 也 有 缺点 ，View 层 和 Controller 层 黏 度 很 高 ， 会 增加 Web 
开发 的 复杂 度 。 


React.js 实战 


1 Web 应 用 的 出 现 


有 了 Web2.0 这 个 概念 后 ， 互 联网 开始 进入 一 个 新 时 代 。 以 前 用 户 在 浏览 器 上 只 能 接收 文 
字 、 图 片 这 样 的 资讯 ， 处 于 一 个 被 动 接收 的 角色 。 在 进入 Web2.0 时 代 后 ，Web 和 用 户 的 交互 
性 加 强 , 类 似 于 桌面 程序 的 Web 应 用 大 量 涌现 , 这 个 时 期 ajax 的 诞生 拉 开 了 SPA (Single Page 
Application， 单 页 面 应 用 ) 序幕 。 

另外 ， 多 媒体 的 诞生 也 催生 了 Web2.0 时 代 的 发 展 ， 像 音频 、 视 频 、Flash 的 出 现 ， 可 以 
让 网 页 变 得 更 加 绚丽 多 彩 ， 给 用 户 在 视觉 和 听觉 上 都 带 来 了 不 一 样 的 体验 。 可 以 说 Web2.0 时 
代 的 到 来 给 Web 前 端 这 一 块 带 来 了 空前 的 繁荣 。 


1 . 3 React 的 诞生 


React 出 生 在 Facebook。 当 初 Facebook 要 搭建 一 个 mstagram 网 站 ， 在 选择 框架 时 ， 对 市 
场 上 的 所 有 JavaScript 的 MVC 框架 都 不 太 满 意 ， 于 是 Facebook 自己 搞 了 一 套 ， 就 是 React。 
后 来 发 现 React 框架 非常 好 用 ， 便 在 2013 年 5 月 开源 了 。 

React 的 出 现 给 Web 前 端 开发 人 员 带 来 了 福音 ,其 新 颖 的 创新 思路 ， 加 上 极 佳 的 性 能 ， 广 
受 前 端 开 发 人 员 的 欢迎 。 下 一 章 将 从 零 开始 讲解 React 的 环境 搭建 、 使 用 方法 以 及 如 何 设计 的 
相关 知识 。 

在 学 习 React 之前， 读者 应 该 对 以 下 知识 进行 了 解 : 

@ Nodejs: 基于 Chrome V8 引擎 的 JavaScript 运 行 环境 , 使 用 了 一 个 事件 驱动 、 非 阻塞 

1/O 的 模式 ， 使 其 轻 量 又 高 效 。 
@ npm: node 的 一 个 包 管 理工 具 ， 主 要 功能 是 对 node 包 的 安装 、 纯 载 、 更 新 、 查 看 等 。 
@ webpack: 前 端 资源 加 载 /打包 工具 ， 可 以 依据 模块 的 依赖 关系 进行 静态 分 析 ， 按 照 一 
定 规则 将 这 些 模 块 生成 静态 资源 。 

@ ES6: 也 称 为 ES2015， 是 在 2015 年 6 月 发 布 的 JavaScript 语言 的 下 一 代 标 准 ， 旨 在 

编写 大 型 应 用 程序 ， 成 为 一 种 企业 级 开发 语言 。 


总 如 果 读 者 对 ES5 比较 熟悉 ， 可 以 使 用 ES5 进行 React 开发 ， 但 是 React 推荐 使 用 ES6， 四 
Ce 在 以 后 是 一 个 趋势 ， 目 前 Facebook 官方 推荐 的 标准 是 ES6。 
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在 使 用 任何 一 个 框架 之 前 ， 必 然 要 经 历 的 一 个 环节 是 环境 搭建 ， 而 npm 是 配置 React 环 
境 的 必要 工具 ， 其 在 下 载 各 种 依赖 包 时 起 着 重要 作用 。 本 节 主 要 为 读者 解析 npm 是 怎样 的 一 
个 工具 。 


1.4.1 什么 是 npm 


简单 来 说 npm (Node Package Manager) 是 包含 在 Nodejs 里 面 的 一 个 包 管 理工 具 ， 如 果 
读者 之 前 使 用 过 Nodejs， 那 对 npm 应 该 不 会 陌生 ， 因 为 npm 会 随 着 Nodejs 一 起 安装 。npm 
是 世界 上 最 大 的 软件 注册 表 ， 其 为 开发 者 连接 到 了 一 个 广阔 的 JavaScript 世界 。 据 官方 数据 统 
计 ，npm 大 约 每 周 有 30 亿 的 惊人 下 载 量 ， 其 中 包含 大 约 60 万 个 package (代码 模块 ) 。 

npm 为 开发 者 提供 了 一 个 代码 模块 共享 的 大 平台 ， 开 发 者 既 可 以 从 npm 服务 器 上 下 载 其 
他 开发 人 员 共 享 的 package, 也 可 以 上 传 自己 的 package 供 其 他 开发 者 使 用 。Nodejs 和 npm 的 
环境 搭建 将 在 2.2 节 中 详细 讲述 。 


1.4.2 理解 npm scripts 


npm scripts 指 的 是 npm 脚本 ， 其 主要 用 途 是 执行 配置 文件 (package.json) 中 “scripts” 属 
性 对 应 的 脚本 语句 。 在 理解 npm scripts 之 前 ， 这 里 先 介绍 一 下 package.json 文件 。 

在 搭建 一 个 前 端 项 目 时 ,一 般 在 项 目的 根 目录 下 要 生成 一 个 package.json 文件 ， 该 文件 用 
来 定义 项 目 信 息 、 配 置 包 依赖 关系 。packagejson 文件 可 以 自己 手动 创建 ， 也 可 以 用 如 下 命令 
创建 : 


$ npm init 
这 里 列举 一 个 简单 的 packagejson 文件 ， 如 下 所 示 : 


. 

"name": "ReactDemo", 
mrersion™s mO=L™" 

} 

上 述 packagejson 文件 只 定义 了 项 目 名 称 和 项 目 版 本 号 。 一 般 情况 下 ， 在 实际 开发 中 ， 
package.json 文件 是 非常 丰富 的 ， 接 下 来 列举 一 个 实际 开发 中 比较 全 面 的 package.json 文件 ， 
如 下 所 示 : 

{ 


"name": "demo01l"， 


人 
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"private": true, 

"dependencies": { 
ed ts ltd 9 1 
MREoact om 0 
"React-scripts": "1.1.1" 

}, 

er 
"start": "React-scripts start", 
"build": "React-scripts build", 
"test": "React-scripts test --env=jsdom", 
"eject": "React-scripts eject" 

}, 

"devDependencies": { 
ROYVPeSsRS L361 

} 

} 


上 述 package.json 文件 内 容 多 了 几 个 字段 ，private、dependencies、devDependencies 和 
scripts。private 指 包 的 私有 属性 ， 如 果 设 置 为 tue， 则 npm 会 拒绝 发 布 ， 主 要 是 为 了 避免 私有 
repositories 不 小 心 被 发 布 出 去 。dependencies、devDependencies 两 个 字段 在 1.4.3 小 节 介 绍 ， 
这 里 主要 介绍 scripts。 

scripts 里 面 放 的 是 npm 要 执行 的 命令 ， 格 式 是 key-value 形式 ， 为 了 简化 操作 ， 有 具体 命令 
为 value， 自 定义 的 简化 命令 为 key， 当 npm 运行 key 命令 时 ， 等 同 于 执行 后 面 的 value 命令 。 
例如 ， 执 行 npm run start 命令 ， 相 当 于 执行 了 React-scripts start。 

简 而 言 之 ，packagejson 配置 文件 中 的 脚本 ， 就 叫 作 npm scripts。 其 实 scripts 里 面 的 命令 
可 以 是 任何 的 shell 命令 ， 执 行 npm run 的 时 候 ， 会 自动 构建 一 个 shell， 脚 本 都 是 在 shell 中 执 
行 ， 所 有 package.json 中 的 脚本 可 以 是 任何 可 以 在 shell 中 有 效 执行 的 命令 。 

也 许 有 读者 会 有 疑问 ， 为 什么 scripts 命令 可 以 直接 使 用 。 这 里 解释 一 下 ，npm run 在 新 建 
一 个 shell 的 时 候 , 会 将 当前 目录 的 node_modules/.bin 目录 配置 到 path 环境 变量 中 ， 如 果 以 前 
用 过 Java, 应 该 了 解 在 配置 jdk 时 需要 将 jdk 目录 配置 到 path 环境 变量 中 才 可 以 全 局 使 用 。 这 
里 npm 是 自动 将 node modules/.bin 配置 到 了 环境 变量 中 。 其 实 上 面 的 scripts 字段 可 以 改写 为 
下 面 的 样子 : 


srapESws 


"start": "./node modules/.bin/React-scripts start", 
"build": "./node modules/.bin/React-scripts build", 
"test": "./node modules/.bin/React-scripts test --env=jsdom", 
"eject™": "./node modules/.bin/React=scripts eject" 
}, 
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1.4.3 dependencies 和 devDependencies 


在 1.4.2 小 节 中 介绍 package.json 文件 的 内 容 时 提 到 了 dependencies 和 devDependencies 两 
个 字段 : 
"dependencies": { 
i de Ye 
et cin 全 且 
"act Seripts wn 
}, 
Wf 
"devDependencies": { 
NOPOD~ EVDSOSn :LS Ol 
} 
dependencies 和 devDependencies 两 个 配置 字段 都 是 用 来 安装 依赖 包 的 ， 区 别 在 于 前 者 安 
装 项 目 运行 所 依赖 的 模块 ， 后 者 安装 项 目 开发 所 依赖 的 模块 。 
在 npm 安装 模块 的 时 候 ， 会 有 两 个 命令 : 


$ npm install <package-name> --save 


和 
$ npm install <package-name> --save-dev 


第 一 个 命令 是 用 来 对 应 dependencies 字段 的 , 第 二 个 命令 是 对 应 devDependencies 字段 的 。 
上 述 示 例 中 有 些 模块 的 版 本 号 之 前 有 个 插入 号 “^”， 比 如 "React": "^16.2.0"， 表 示 安 装 React 
的 16.x.x 的 最 新 版 本 (不 低 于 16.2.0)， 但 是 不 安装 17.x.x， 也 就 是 说 安装 时 不 改变 大 版 本 号 。 
如 果 版 本 号 前 面 没 有 任何 标识 ， 比 如 "了 React-scripts": "1.1.1"， 表 示 只 安装 React-scripts 的 1.1.1 
版 本 。 


2.2.3) ， 但 是 不 安装 2.3.x， 也 就 是 说 安装 时 不 改变 大 版 本 号 和 次 版 本 号 。 另 外 ， 需 要 注 


想必 有 时 版 本 号 前 面 会 有 波浪 “~”， 例 如 “~2.2.3”， 表 示 安 装 2.2.x 的 最 新 版 本 号 (不 低 于 
意 的 是 ， 如 果 大 版 本 号 为 0，“~” 和 “^” 的 表示 作用 是 一 样 的 。 


PP 本 
| eS 


在 没有 出 现 模块 管理 器 之 前 的 前 端 开发 , 如 果 要 引用 依赖 资源 , 通常 的 做 法 是 将 依赖 文件 
引用 到 .html 文件 中 。 比 如 , 要 引用 js 文件 , 在 .html 文件 中 用 <scripf> 标 签 引用 ; 引用 .css 文件 ， 
在 .html 文件 中 用 <link> 标 签 引用 。 这 样 做 的 次 端 是 ， 如 果 引 用 的 资源 文件 太 多 ， 请 求 太 多 ， 
会 拖 慢 网 页 加 载 速度 ， 影 响 用 户 体验 ， 另 外 也 会 使 网 页 体积 腾 肿 、 不 便 维护 。 随 着 模块 管理 器 


webpack 
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的 出 现 ， 上 述 问 题 得 到 解决 。 目 前 市 面 上 流行 的 包 管理 器 有 很 多 ， 比 如 Bower、Browserify、 
webpack 等 ,本 书 主要 讲解 webpack 这 个 前 端的 包 管 理 器 , 其 他 工具 的 用 法 和 webpack 大 同 小 
异 ， 读 者 自行 网 上 学 习 即 可 。 


一 之 前 引用 的 js 文件 或 .css 文件 即 可 理解 为 模块 。 | 


webpack 主要 有 4 个 核心 概念 : 


@ 入 口 (entry) : webpack 所 有 依赖 关系 图 的 起 点 。 

@ 出口 (output) : 指定 webpack 打包 应 用 程序 的 地 方 。 
@ ”加载 器 (loader) : 指定 加 载 的 需要 处 理 的 各 类 文件 。 
@ 插件 (plugins) : 定义 项 目 要 用 到 的 插件 。 


1.5.1 为 什么 需要 webpack 


移动 互联 网 时 代 的 网 站 正在 慢 慢 演 化 为 Web APP， 这 种 局 势 愈 演 愈 烈 ， 读 者 应 该 能 感受 
到 Web 前 端 发 展 之 迅速 ， 浏 览 器 在 不 断 强大 ，JavaScript 的 新 标准 ES6 也 在 2015 年 制定 ， 各 
种 流行 的 JS 框架 问世 ， 发 展 着 实 快 。 另 外 ， 现 在 的 Web 前 端 更 倾向 单 页 面 应 用 (SPA) ， 要 
求 的 页 面 刷新 越 来 越 少 , 这 样 庞 大 的 代码 量 如 果 管 理 不 好 就 会 导致 很 多 的 后 续 问 题 , 比如 各 个 
模块 耦合 度 变 高 、 很 难 维护 等 。 这 样 就 催生 了 模块 管理 器 。 

webpack 是 前 端的 一 个 模块 管理 工具 ， 其 可 依据 各 个 模块 之 间 的 依赖 关系 进行 静态 分 析 ， 
然后 将 这 些 模块 按照 相应 规则 生产 静态 资源 供 项 目 调 用 。 可 以 通过 图 1-1 来 理解 webpack 是 做 
什么 的 。 


webpack 


MODULE BUNDLER 


图 1-1 webpack 示意 图 
可 以 看 出 ，webpack 可 以 将 具有 各 种 依赖 关系 的 静态 模块 转化 成 一 个 独立 的 静态 模块 ， 这 
样 做 的 好 处 是 大 大 减少 了 请 求 次 数 ， 提 高 了 网 页 的 性 能 ， 用 户 体 验 也 随 之 提高 。 
webpack 的 另 一 个 作用 是 可 以 把 目前 一 些 浏览 器 解释 不 了 的 语言 进行 编译 , 转换 成 浏览 
可 以 识别 的 内 容 。React 的 所 有 代码 示例 都 以 ES6 标准 讲解 ，ES6 的 有 些 语法 目前 在 一 些 主流 


6 
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的 浏览 器 上 还 不 支持 ， 需 要 对 webpack 进行 一 些 配 置 后 ，React 才 可 正常 运行 。 


1.5.2 ”webpack 入 口 和 出 口 


webpack 的 四 大 要 素 即 entry、output、loader 和 plugins， 在 讲解 这 几 个 要 素 之 前 ， 先 了 解 
怎么 安装 webpack。 
webpack 的 安装 需要 npm 来 完成 ， 有 两 种 安装 方式 ， 命 令 如 下 : 


$ npm install -g webpack // 全 局 安装 
或 者 
$ npm install --save-dev webpack // 安 装 到 项 目 目录 中 


安装 好 之 后 ， 就 可 以 使 用 webpack 的 命令 了 。 比 如 现在 有 一 个 mainjs 文件 ， 要 将 其 打包 
生成 一 个 bundlejs 文件 ， 就 可 以 用 下 面 的 命令 : 

$ webpack main.js bundle.js 

一 般 在 实际 的 项 目 开 发 中 ， 要 把 这 些 命令 写 到 一 个 名 为 webpack.config,js 的 文件 中 。 

webpack 需要 处 理 具 有 依赖 的 各 个 模块 ， 这 些 模块 会 构成 一 个 关系 图 。webpack 的 入 口 就 
是 这 张 关 系 图 的 起 点 ， 指 的 就 是 入 口 文件 。webpack 的 出 口 指 的 是 需要 把 这 张 关系 图 导出 到 哪 
个 文件 中 ， 即 导出 文件 。 这 里 以 一 个 具体 的 webpack.config.js 文件 讲解 ， 配 置 如 下 : 


module.exports = { 


entry: './main.js', 
output: { 
filename: 'bundle.js' 
} 
] 7 
上 述 webpack.configjs 文件 只 配置 了 项 目的 entry 和 output。 在 该 项 目的 关系 图 中 , mainjs 
是 起 点 ，mainjs 可 能 和 别 的 模块 存在 依赖 关系 ， 但 是 开发 者 不 需要 关心 这 些 ， 寻 找 依赖 、 解 
决 依赖 是 webpack 的 工作 。 
entry 字段 指定 入 口 文件 ， 也 可 以 理解 为 APP 启动 时 运行 的 第 一 个 文件 。 其 语法 如 下 : 


entry: string | Arrary<string> 


entry 字段 可 以 为 一 个 字符 串 , 也 可 以 是 一 个 字符 串 数组 ， 所 以 entry 可 以 指定 一 个 入 口 文 
件 ， 也 可 以 指定 多 个 入 口 文件 。 

output 主要 是 告诉 webpack 把 整理 后 的 所 有 资源 都 放 在 哪里 , 指定 输出 位 置 。 上 述 示例 中 ， 
output 只 指定 了 filename， 其 实 还 可 以 指定 路 径 path， 如 果 省 略 path 参数 ， 将 默认 输出 到 
webpack.config.js 同 级 目录 下 。 
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1.5.3 webpack loader 


webpack 要 完成 的 任务 是 把 具有 依赖 关系 的 各 个 文件 进行 整合 , 然后 打包 ， 当 然 文件 类 型 
会 有 很 多 种 ， 比 如 .css、.html、.scss、.jpg 等 。 但 是 webpack 只 认识 JavaScript， 那 处 理 其 他 
类 型 的 文件 是 如 何 做 到 的 呢 ? loader 解决 了 这 个 问题 。 

loader 在 构建 文件 过 程 中 起 着 重要 的 作用 , 首先 loader 可 以 识别 出 要 对 哪些 文件 进行 预 处 
理 ， 然 后 loader 转换 这 些 文件 添加 到 bundle (构建 后 的 模块 ) 中 。 例 如 ，React 开发 一 般 使 有 
JSX 这 种 扩展 语言 来 编写 ，JSX 这 种 格式 目前 的 浏览 器 是 理解 不 了 的 ， 那 webpack loader 可 以 
在 JSX 被 项 目 使 用 之 前 做 一 些 预 处 理 ， 可 以 将 其 转换 为 JavaScript 语言 。 示 例如 下 : 


module .exports = { 


entry: { 
app: './app.js' 
}, 
output: { 
filename: 'bundle.js', 
Baths » /Aist, // 输 出 路 径 
}, 
module: { 
rules: [ 
{ 
test /AN SS SA 
use: 'babel-loader' 
}, 
{ 
LesE: /Ncsss/s 
use: ‘css-loader’ 
} 
] 
} 
} 


上 述 示例 中 ，test 字段 表示 要 对 哪些 文件 进行 构建 ，use 字段 表示 要 用 哪些 模块 对 类 型 文 
件 进 行 构建 。 在 配置 loader 之 前 ，use 中 的 模块 是 需要 安装 的 。 命 令 如 下 : 


$ npm install --save-dev babel-loader 
$ npm install --save-dev css-loader 
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副 在 webpack 早期 版 本 中 ， 写 法 是 这 样 的 : AN 


module.exports = { 
We 


module: { 


loaders: [ 

{ 
test: / 八 . (js1Jjsx)S/， 
loader: 'babel-loader' 

]， 

{ 
test= /Nc 
loader:'css-loader' 


\、 
) ) 
webpack 最 新 版 本 已 废弃 了 loaders、loader 的 写法 ， 改 成 了 rules、use。 这 个 读者 要 注意 ， 


网 上 的 一 些 教程 是 以 老 版 本 的 标准 写 的 ， 如 果 用 老 版 本 的 写法 ， 那 么 在 运行 webpack 的 时 候 


会 报错 。 


1.5.4 webpack plugins 


插件 的 意义 一 般 是 用 于 丰富 功能 ，webpack 的 plugins 就 是 用 来 丰富 webpack 功能 的 。 
plugins 在 webpack 中 起 着 重要 作用 ， 开 发 者 可 以 在 webpack.configjs 配置 文件 中 添加 想 要 的 
其 他 插件 功能 。 

webpack plugins 的 用 法 很 简单 ， 先 调用 require， 然 后 在 plugins 字段 中 用 new 来 定义 。 


副 插件 分 为 webpack 自 带 和 第 三 方 这 两 类 ,如 果 是 第 三 方 插件 , 需要 在 require 之 前 利用 ™| 
安装 。 
上 


例如 ， 现 在 需要 安装 一 个 第 三 方 插件 html-webpack-plugin， 操 作 步 又 如 下 。 
(1) 该 插件 为 第 三 方 插件 ， 首 先 需要 npm 安装 ， 命 令 为 ; 
$ npm install --save-dev html-webpack-plugin 


(2) 然后 配置 webpack.configjs 文件 中 的 plugins: 


Var HtmlWebpackPlugin = require('html-webpack-plugin'); 
module.exports = { 
entry: { 
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洲 


1 


也 


output: { 
filename: 'bundle.js', 
path: /dist" // 输 出 路 径 
}, 
module: { 
ruless T 
{ 
Liest> JN (ol ISsz) o> 
use: 'babel-loader' 
}, 
{ 
test: /Ncsad/ 
Use C53 10ader, 
} 
] 
}, 


plugins: [new HtmlWebpackPlugin()] 


} 


plugins 参数 为 一 个 数组 ， 可 以 传 入 多 个 plugin， 另 外 需要 注意 plugin 是 可 以 带 参数 的 ， 
所 以 plugins 属性 传 入 的 必须 为 new 实例 。 


ES6 


ECMAScript6 〈 简 称 ES6) 历时 将 近 7 年 时 间 ， 在 2015 年 6 月 份 正式 发 布 ， 由 于 这 个 新 
标准 是 在 2015 年 指定 ， 所 以 ES6 也 称 为 ES2015。ES6 带 来 很 多 新 语法 、 新 特性 ， 比 如 箭头 
函数 (=>) 、class (类 ) 、 模 板 字 符 串 等 。 

相对 ES5 (2009 年 指定 的 ECMAScript 标准 ) 来 说 ，ES6 由 在 以 新 语法 和 新 特性 来 提高 
ECMAScript 的 开发 效率 ，ES6 的 别名 被 定义 为 Harmony (和 谐 ) ,读者 应 该 也 能 体会 到 ,ES6 


定 要 带 来 一 次 优雅 的 编程 变革 ， 本 节 了 


要 介绍 ES6 的 一 些 新 特性 。 


.6.1 函数 的 扩展 


ES6 函数 扩展 的 新 特性 给 编程 人 员 和 阅读 代码 人 员 带 来 了 很 多 便利 之 处 ， 以 前 
ECMAScript 的 函数 形式 看 起 来 有 点 丑陋 ， 并 且 在 一 些 使 用 方面 限制 也 较 多 。 本 小 节 主要 讲述 


S6 在 函数 上 都 做 了 哪些 扩展 。 
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1. 函数 参数 默认 值 
在 前 端 开发 中 ， 有 时 候 需要 写 一 些 组 件 供 其 他 开发 者 调用 ， 这 时 需要 提供 对 外 接口 。 对 外 


接口 参数 的 传 入 由 调用 者 决定 ， 如 果 在 调用 对 外 接口 时 ， 没 有 传 参 ， 该 怎么 处 理 ? ES6 之 前 的 
函数 参数 默认 值 是 这 样 实现 的 ， 代 码 如 下 : 


【示例 1-1】 


function showName (arg){ 


Var name = arg || "React"; 
console.1log (name); 


} 
showName () // 输 出 React 
showName ("liujianghong") // 输 出 Liujianghong 


以 前 只 能 以 这 种 变通 的 方式 来 帮助 函数 处 理 参数 默认 值 ， ES6 提供 了 新 的 语法 标准 , 使 得 
函数 参数 默认 值 的 处 理 变 得 简洁 ， 代 码 如 下 : 


【示例 1-2】 


function showName (arg="React"){ 
console.1og (arg); 
} 
showName () // 输 出 React 
showName ("liujianghong") // 输 出 Liujianghong 


2. 剩余 ( rest ) 参数 


ES6 发 布 之 前 ，ECMAScript 对 函数 的 定义 中 存在 一 个 arguments 对 象 ， 该 对 象 可 以 访问 
传 入 的 参数 列表 。 例 如 ， 要 实现 一 个 求 和 函数 ， 以 前 ECMAScript 的 写法 是 这 样 的 : 


【示例 1-3】 


function sum() { 
Var sum = 0; 
for (var val of Array.prototype.slice.call (arguments)) { 
sum += val; 
} 
return sum; 
} 
console.1o0g (sum(1,2,3)) // 输 出 6 


上 面 示例 是 ES6 之 前 实现 求 和 功能 的 写法 。 


arguments 是 一 个 类 数组 对 象 ， 不 是 一 个 真正 的 数组 ， | 
e Array.prototype.slice.call0 方 法 将 其 转换 成 数组 对 象 。 
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ES6 在 剩余 参数 上 提供 了 新 的 语法 标准 ， 就 上 述 求 和 功能 ，ES6 可 以 这 么 写 : 
【示例 1-4】 


function sum(...values) { 
let sum = 0; 
for (var val of values) { 
sum += val; 
} 
return sum; 
} 
console.1log(sum(1, 2, 3)) // 输出 6 


剩余 参数 的 语法 为 : 
Function fnName([arg, ]..restArgs){} 


上 述 示例 中 ，...values 为 剩余 参数 ， 调 用 该 函数 时 ， 参 数 个 数 可 以 是 不 确定 的 。 剩 余 参数 
是 一 个 真正 的 数组 ， 所 以 不 需要 转换 ， 而 且 所 有 的 数组 特性 剩余 参数 都 具有 。 


必 寺 在 使 用 剩余 参数 语法 时 , 剩余 参数 后 面 是 不 可 以 再 有 参数 的 , 否则 会 报错 ， | 
€ 血 1 (.…-rest, arg){} //” 这 种 写法 是 错误 的 。 


3. 箭头 函数 

所 谓 箭头 函数 ， 就 是 利用 箭头 〈=>) 来 定义 函数 ， 属 于 匿名 函数 一 类 ， 如 果 读 者 了 解 过 
CoffeeScript (JavaScript 的 衍生 语言 ) ， 就 不 会 对 箭头 函数 陌生 了 。 由 于 箭头 函数 在 实现 一 些 
功能 上 比较 简洁 方便 ， 所 以 这 一 个 特性 的 使 用 率 非 常 高 。 

箭头 函数 的 语法 也 非常 简单 : 

语法 : arg => statement 

箭头 前 面 是 参数 ， 后 面 是 实现 语句 。 例 如 : 


var name = function (arg){ 


return arg7 
} 


上 述 功 能 用 ES6 的 箭头 函数 可 以 写 为 : 
var name = arg => arg; 


如 果 参 数 有 多 个 ， 并 且 实 现 语句 也 有 很 多 ， 那 参数 需要 用 小 括号 “0” 括 起 来 、 用 逗号 隔 
开 ， 多 条 实现 语句 用 大 括号 “{}” 插 起 来 。 假 如 要 实现 一 个 多 数 求 和 功能 ， 可 以 这 么 写 : 


var sum = (num01,num02) => {return num0l+num02}; 
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副 箭头 函数 中 大 括号 中 的 内 容 是 被 解释 为 代码 块 的 ， 如 果 在 大 括号 中 返回 一 个 对 象 , 需要 在 | 
e 对 象 外 面 再 加 一 个 小 括号 ， 例 如 : 


let person = (age,name) => { age: age, name: name }; // 错误 


let person = (age,name) => ({ age: age, name: name }); // 正确 


1.6.2 ”对 象 的 扩展 


ES6 之 前 的 ECMAScript 虽然 说 是 面向 对 象 语言 ,但 其 并 没有 像 Java 语 言 那样 有 类 的 概念 ， 
所 以 之 前 的 ECMAScript 编程 不 是 完全 面向 对 象 编程 ， 在 对 象 的 各 种 功能 方面 比较 弱化 。ES6 
标准 给 予 了 对 象 一 些 扩展 ， 极 大 地 提高 了 ECMAScript 对 象 的 可 操作 性 。 


1. 属 性 简化 


项 目 中 会 经 常 遇 到 这 种 情况 , 一 个 函数 的 返回 值 有 多 个 , 以 前 的 前 端 工程 师 可 能 会 利用 对 
象 字面 量 或 数组 来 模拟 该 功能 ， 代 码 如 下 : 


【示例 1-5】 


function f(age, name) { 


return {myAge: age, myName: name}; 
} 
console.1og(f(26,"liujianghong")); 
// 输 出 结果 为 : {myAge: 26, myName: "liujianghong"} 


ES6 在 表达 式 的 结构 上 提供 了 简化 功能 ， 上 面 的 例子 用 ES6 的 标准 可 以 写 为 : 
【示例 1-6】 


function fl(age, name) { 
return {age,name}; 
} 
console.1log(f(26,"liujianghong")); 
// 输 出 结果 为 : {age: 26，name: "liujianghong"} 


从 上 述 示例 可 以 看 出 ，ES6 是 允许 在 对 象 中 直接 写 变量 的 , 属性 名 即 为 变量 , 属性 值 即 为 
变量 值 ， 这 种 表达 式 的 简化 功能 可 以 使 项 目 代码 变 得 简洁 漂亮 。 
其 实在 ES6 标准 中 ， 除 了 字面 量 属性 可 以 简写 外 ， 方 法 也 可 以 简写 。 代 码 如 下 : 


【示例 1-7】 
// 之 前 写法 


Const person = { 
showName: function() { 
return "liujianghong"; 
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Fa 
console.1o0g (person.showName ()) // 输 出 结果 为 : 1iujianghong 


与 ES6 的 写法 作为 对 比 ， 代 码 如 下 : 
【示例 1-8】 


const person = { 
ShowName () { 
return "liujianghong"; 
} 
] 7 
console.1og(person.showName () ) // 输 出 结果 为 : 1iujianghong 


2. 属性 名 表达 式 
属性 名 用 表达 式 代 替 ， 这 个 功能 其 实在 ES6 之 前 是 有 支持 的 ， 例 如 : 
obj ['"a'+'bc']='React' 
如 果 对 象 是 用 字面 量 来 定义 ， 那 么 这 种 属性 名 的 表达 式 是 不 允许 的 。ES6 扩展 后 ， 这 个 语 
法 被 引入 到 了 对 象 的 字面 量 中 ， 例 如 : 
【示例 1-9】 


let propKey = "foo' 
let obj = { 
[PropKey] : true, 
Bras oe ls 26 
] 7 


console.10g (obj); // 输 出 结果 为 : {foo: true, age: 26} 
在 ES6 中 ， 这 种 方式 的 定义 也 适用 于 函数 名 的 定义 ， 例 如 : 

【示例 1-10】 

let obj = { 


['show' + "age']() { 
return 26; 
} 
}; 
console.1l0g (obj.showage ()) ”// 输 出 结果 为 : 26 
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属性 名 表达 式 和 属性 简化 是 不 可 以 同时 使 用 的 ， 例 如 : 


// 错误 
const foo = "bar'7 
const bar = "abc'"7 


const baz = { ttool 3 

// 正确 

Const foo = "bar77 

const baz = { [foo]: ‘abc"}; 


1.6.3 class 


有 一 定 JavaScript 经 验 的 读者 应 该 知道 ，JavaScript 是 可 以 面向 对 象 编程 的 一 门 语言 。 但 


是 ES6 之 前 的 JavaScript 没有 原生 的 类 机 制 , 不 像 Java、C++ 语 言 那 样 , 直接 可 以 用 关键 字 class 
来 定义 一 个 类 ， 并 且 类 可 以 继承 、 重 载 等 。 那 以 前 JavaScript 没有 class 关键 字 ， 类 概念 是 怎 


么 实现 的 呢 ? 

以 前 工程 师 在 实现 类 概念 时 常常 用 函数 原型 来 实现 类 系统 ， 比 如 要 定义 一 个 Person 类 ， 
可 以 这 么 写 : 

【示例 1-11】 


function Person (name,age, sex){ 
this.name = name; 
this.age = age; 
this.sex = sex; 
} 
Person.prototype.showName = function () { 
console.1log (this.name); 
} 
Var p = new Person("xiaoming",26,"man"); 
p.showName (); // 输 出 结果 为 : xiaoming 


ES6 标准 中 类 的 基本 语法 为 : 

class name {...} 

上 述 的 示例 用 ES6 的 标准 可 以 改写 成 这 样 : 
【示例 1-12】 


class Personf{ 
constructor (name, age, sex) { 
this.name = name; 
this.age = age; 


this.sex = sex; 
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< 初探 Reacf+ 


通过 1.3 节 的 讲述 ， 读 者 应 该 能 够 知道 ，React 是 Facebook 内 部 构建 的 一 个 框架 ， 旨 在 利 
用 组 件 化 思想 让 前 端 View 层 有 更 好 的 建设 性 。 本 章 将 带领 读者 真正 进入 React 世界 ， 探 寻 这 
个 被 当代 前 端 开发 者 追捧 的 框架 的 魅力 所 在 。 


React 带 来 的 变化 


React 颠覆 了 以 前 我 们 了 解 的 一 些 JS 框架 (比如 jQuery) 的 写法 和 架构 ， 本 节 就 来 说 说 
React 的 特色 。 


2.1.1 ”React 的 声明 式 编程 


声明 式 编程 是 告诉 机 器 想 要 什么 信息 ， 机 器 就 返回 什么 信息 ， 偏 重 结果 。 声 明 式 编程 可 以 
和 命令 式 编程 做 一 个 对 比 , 命令 式 编 程 是 命令 机 器 要 做 什么 事 , 机 器 就 做 什么 事 , 偏重 于 过 程 。 
为 了 更 好 理解 这 一 概念 ， 下 面 列举 两 个 示例 进行 对 比 。 


【示例 2-1 命令 式 编程 】 


<script> 
var arry = [1,2,3,4,5] 
var doubled = [] 
for(var i = 0; i < arry.length; i++) { 
var newArry = arry[i] * 2 
doubled.push (newArry) 


} 
console.10g (doubled) // 输 出 结果 为 : doubled [2,4,6,8,10] 
</script> 


上 述 示例 中 实现 的 功能 为 , 将 arry 数组 中 的 所 有 值 进行 乘 2 操作 ,运用 for 循环 语句 来 告 
诉 机 器 , 要 用 这 种 方式 来 实现 。 这 就 是 命令 式 编程 的 方式 。 接 下 来 看 声明 式 编程 是 怎么 实现 的 。 
【示例 2-2 ”声明 式 编程 】 


Soript> 
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var re = U2] 
var doubled = arry.map (function (val) { 
return val*2; 
}) 
console.log(doubled) //=> [2,4,6,8,10] 
</script> 
上 述 示例 的 实现 ， 是 直接 将 arry 数组 的 所 有 值 进行 乘 2 操作 后 直接 将 结果 返回 给 doubled 
数组 ， 即 告诉 机 器 ， 要 得 到 一 个 乘 2 后 的 结果 数组 。 这 就 是 声明 式 编 程 。 
React 的 声明 式 编程 就 是 这 个 原理 ， 把 相关 的 实现 都 抽 离 出 来 ， 使 开发 者 更 多 地 去 关注 想 
要 什么 。 在 声明 式 编程 的 思想 中 ， 更 加 突出 的 是 整体 性 的 编程 思路 ， 这 也 是 React 这 个 框架 中 
的 一 个 核心 思想 。 


2.1.2 ”React 的 组 件 化 思想 

以 前 读者 在 学 习 HTML 标签 的 时 候 ， 其 实 就 已 经 接触 到 组 件 化 了 ，HTML 的 标签 就 可 以 
理解 为 一 个 组 件 ， 比 如 一 个 <button></button>， 就 可 以 理解 成 这 是 一 个 按钮 组 件 。React 的 整 
体 设计 思路 就 是 实现 自 定义 的 组 件 。 组 件 化 的 编程 有 很 多 优势 : 一 个 好 的 组 件 可 以 在 项 目 中 多 
处 使 用 , 这样 会 节省 很 多 重复 工作 ; 其 次 , 组 件 的 分 离 可 以 让 开发 者 更 加 专注 每 个 组 件 内 部 的 
实现 ， 这 种 高 内 聚 的 特性 还 不 会 影响 到 其 他 开发 者 的 代码 模块 。 

【示例 2-3 React 自 定义 组 件 】 


<script type="text/babel"> 


Var MYButton = React.createClass({ 
render: function () { 
return (<button>This is my button</button>); 
} 
1); 
ReactDOM.render ( 
<MyButton />， 
document .getElementById('example') 
) 
</script> 


在 上 述 示 例 中 ，MyButton 就 是 一 个 自 定义 组 件 。 组 件 的 定义 也 可 以 用 ES6 提供 的 class 
来 定义 ， 上 述 的 示例 用 class 来 定义 也 可 以 写 为 这 样 : 


class MyButton extends Component { 
render() { 
return ( 
<div className="App"> 
<button>This is my button</button> 
</div> 
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} 
} 
ReactDOM.render (<MyButton />, document .getElementById('example')); 


2.1.3 ”React 的 虚拟 DOM 


在 没有 虚拟 DOM 概念 之 前 , 如 果 要 对 DOM 节点 执行 修改 操作 , 就 会 直接 操作 真实 DOM 
树 。 众 所 周知 ， 前 端 中 一 些 性 能 低 的 问题 ， 有 很 多 原因 就 是 真实 DOM 树 操作 太 过 频繁 而 导致 
页 面 性 能 下 降 造成 的 。 

React 中 虚拟 DOM 概念 的 出 现 ， 在 提高 页 面 性 能 方面 起 到 了 很 大 的 作用 。 比 如 现在 要 操 
作 一 个 A 节点 ， 进 行 三 次 状态 改变 : 第 一 步 改 为 1 状态 ， 第 二 步 改 为 2 状态 ， 第 三 步 再 改 回 1 
状态 。 如 果 是 传统 的 DOM 操作 ， 会 进行 3 次 改变 ， 而 利用 React 的 虚拟 DOM 技术 ， 会 对 A 
节点 的 第 一 次 状态 和 最 后 一 次 状态 进行 对 比 。 在 该 例 中 , 第 一 次 和 最 后 一 次 的 状态 一 样 ， 所 以 
React 是 不 会 对 真实 的 DOM 树 进行 改变 的 ， 这 样 就 大 大 节省 了 演 染 成 本 ， 提 高 了 页 面 运行 效 

也 就 是 说 ， 虚 拟 DOM 树 可 以 记录 节点 的 变化 过 程 ,但 最 后 真实 的 泻 染 结 果 是 由 di 三 算法 

(第 5 章 将 讲解 ) 来 控制 的 ，React 只 对 有 真正 变化 的 节点 进行 泻 染 。 


©@4 本 地 环境 搭建 
在 使 用 React 之前， 需要 提前 搭建 React 的 开发 环境 。React 有 3 种 搭建 环境 的 方式 。 


(1) 引用 React CDN 资源 :这 种 方式 通过 <Script></Scripe> 标 签 引用 后 即 可 使 用 。 


<script crossorigin 
src="https://unpkg.com/react@16/umd/react .production.min.js"></script> 

<script crossorigin 
src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script> 


(2) 通过 npm 安装 React: 这 种 方式 使 用 包 管理 工具 npm 安装 React。 


$ npm install --save react react 
$ npm install --save react react-dom 


(3) 利用 脚手架 create-react-app 来 安装 React。 


$ npm install -g create-react-app 
$ create-react-app my-app 

$ cd my-app/ 

$ npm start 


第 3 种 环境 搭建 方式 适合 React 开发 初学 者 ， 故 本 书 以 该 方式 讲解 React 的 环境 搭建 。 
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Facebook 为 了 简化 开发 者 的 环境 搭建 过 程 ,提供 了 一 个 脚手架 create-react-app， 其 提供 了 
项 目 开发 中 通用 的 包 依赖 , 开发 者 在 利用 create-react-app 创建 项 目 时 , 该 脚手架 会 自动 下 载 所 
有 的 依赖 包 , 轻松 地 搭建 React 开发 环境 。 目前 create-react-app 是 市 面 上 最 流行 的 一 个 脚手架 。 


2.2.1 Node 与 npm 安装 


在 讲述 Node 及 npm 安装 之 前 , 先 带 领 读 者 熟悉 一 下 这 两 种 技术 。 npm 已 在 1.4 节 中 讲 过 ， 
读者 可 以 返回 查阅 。 下 面 简单 介绍 一 下 Node。 

2009 年 Ryan 正式 推出 了 基于 JavaScript 语言 和 V8 引擎 的 开源 Web 服务 器 项 目 , 命名 为 
Nodejs, 简称 Node。Node 是 一 个 基于 Chrome V8 引擎 的 JavaScript 运行 环境 , 使 用 事件 驱动 、 
非 阻 塞 的 IO 模型 ， 使 其 轻 量 而 高 效 。 简 单 来 说 ，Node 是 运行 在 服务 器 端的 JavaScript。 

利用 create-react-app 搭建 React 开发 环境 之 前 ， 需 要 安装 Node 和 npm， 以 前 这 两 个 包 需 
要 分 别 安装 ， 后 来 npm 注入 Node 中 ， 所 以 现在 安装 了 Node， 就 默认 安装 了 npm。 

Node 官网 下 载 链接 为 https://nodejs.org/en/download/current/。 通 过 此 链接 进入 官网 ， 可 以 
看 到 各 个 系统 的 Node 版 本 ， 如 图 2-1 所 示 。 


Downloads 


Latest Current Version: 10.0.0 (includes npm 5.6.0) 


Download the Node.js source code or a pre-built installer for your platform, and start developing today. 
LTS 
Recommended For Most Users 
下 剖 | 
豆 丽 


Windows Installer macOS Installer 
edevioaOnee m 000 pkg 


Windows Installer (.msi) 

Windows Binary (.zip) 

macOs Installer (.pkg) 

macOS Binary (.tar.gz) 

Linux Binaries (x64) 

Linux Binaries (ARM) ARMV7 
Source Code node-v10.0.0.targz 


图 2-1 Node 下 载 页 面 
目前 Node 最 新 并 且 稳 定 的 版 本 为 10.0.0。 读 者 可 以 根据 自己 的 系统 情况 对 应 下 载 Node 
并 安装 。 安 装 完毕 后 ， 可 通过 查看 Node 版 本 号 来 确认 是 否 安 装 成 功 ， 在 终端 输入 命令 “node 
v” 即 可 查看 ， 如 图 2-2 所 示 。 
@@e 人 liujianghong 一 -bash — 80x24 


localhost:~ liujianghong$ node -v 


v186.8.8 
localhost:~ liujianghong$ 目 


图 2-2 查看 Node 版 本 号 
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副 如 果 读 者 电脑 曾 安装 过 版 本 比较 低 的 Node， 想 把 Node 升级 为 最 新 最 稳定 的 版 本 ， 这 里 
给 读者 一 个 小 小 的 提示 。 不 需要 印 载 后 再 安装 ， 只 需要 执行 以 下 命令 即 可 : 
$ npm cache clean -f // 清 除 Node 的 cache 
$ npm install -g n // 安 装 n 工具 ， 该 工具 是 专门 管理 Node 版 本 的 工具 
$ n stable // 安 装 最 新 最 稳定 的 Node 版 本 


由 于 Node 自 带 npm， 所 以 安装 Node 后 ，npm 也 已 安装 。 查 看 npm 是 否 安装 成 功 ， 也 可 
以 通过 查看 其 版 本 号 来 验证 ， 命 令 为 “npm -v”， 如 图 2-3 所 示 。 


Oae 人 liujianghong — -bash — 80x24 


[localhost:~ liujianghong$ node -v 


v18.8.0 

[localhost:~ liujianghong$ npm -v 
5.6.8 

localhost:~ liujianghongSs 目 


图 2-3 查看 npm 版 本 号 


2.2.2 ”打造 属于 你 的 编辑 器 


俗话 说 ， 工 欲 善 其 事 ， 必 先 利 其 器 。 一 个 优秀 的 开发 工具 能 够 极 大 地 提高 前 端 工程 师 的 开 
发 效率 。 开 发 前 端的 IDE 有 很 多 ， 比 如 Dreamweaver、Sublime、ItelliJ IDEA、WebStorm 等 ， 
就 目前 各 大 互联 网 公司 的 前 端 开发 环境 来 说 ， 多 数 前 端 工程 师 选用 的 是 WebStorm， 所 以 本 书 
主要 介绍 WebStorm 开发 工具 。 

WebStorm 是 JetBrains 公司 旗下 一 款 JavaScript 开发 工具 ， 被 国内 前 端 工程 师 称 为 “前 端 
开发 神器 ”。 与 IntelliJ IDEA 同 源 ， 继 承 了 IntelliJ IDEA 强大 的 JavaScript 功能 。 

WebStorm 官网 下 载 链接 为 http://www.jetbrains.com/webstorm/ ， 通 过 该 链接 可 以 进入 
WebStorm 下 载 界面 ， 如 图 2-4 所 示 。 


webstorm 


图 2-4 WebStorm 下 载 页 面 


注 : 官网 下 载 的 WebStorm 可 以 试用 30 天， 试用 期 过 后 需要 购买 。 
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下 载 安装 后 , 即 可 使 用 WebStorm。WebStorm 集成 了 React 的 开发 环境 , 在 创建 一 个 React 
App 后 ，WebStorm 会 自动 下 载 React 需要 的 各 种 依赖 包 ， 无 须 开发 者 再 次 手动 配置 。 该 工具 
占用 资源 比较 多 ， 如果 读者 不 喜欢 , 后 面 我 们 介绍 项 目 时 也 会 给 出 脚手架 创建 项 目的 方式 , 没 
有 安装 这 个 工具 不 会 受到 影响 。 


编写 第 一 个 React 应 用 


WebStorm 准备 就 绪 后 , 就 可 以 搭建 一 个 简单 的 React App 了 。 打 开 WebStorm, 选择 Create 
New Project〔 创 建 一 个 项 目 ) ， 就 会 看 到 图 2-5 所 示 的 界面 ， 选 择 React App 选项 。 


New Projsct 


图 2-5 创建 一 个 React App 工程 


其 中 : 

@ Location: 指定 项 目 路 径 及 项 目 名 称 。 

@ Node interpreter: 指定 Node 路 径 及 显示 Node 版 本 。 

@ create-react-app: 指定 create-react-app 的 安装 路 径 及 显示 版 本 号 。 
@ Scripts version: 指定 脚本 的 版 本 号 。 


且 元 | 如 果 是 第 一 次 使 用 create-react-app， 需 要 用 npm 去 安装 该 脚手架 ， 命 令 如 下 : | 


[ $ npm install -g create-react-app 


单 击 Create 按钮 创建 项 目 ， 这 个 过 程 需要 1 分 钟 左右 ， 这 段 时 间 里 ，create-react-app 会 帮 
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助 开 发 者 创建 必要 的 配置 文件 以 及 下 载 React 项 目 所 需要 的 各 种 依赖 模块 。 这 个 过 程 的 日 志 会 
在 WebStorm 中 的 Run 栏 中 显示 ， 内 容 如 下 : 


Creating a new React app in /Users/liujianghong/WebstormProjects/hello-react. 

Installing packages. This might take a couple of minutes.// 这 里 开始 下 载 依赖 模块 

Installing react, react-dom, and react-scripts... 

> fsevents@1.2.3 install /Users/liujianghong/WebstormProjects/hello-react/ 
node modules/fsevents 

> node install 

Success:"/Users/liujianghong/WebstormProjects/hello-react/node modules/fsev 
ents/lib/binding/Release/node-v64-darwin-x64/fse.node" is installed via remote 

> spawn-sync@1.0.15 postinstall /Users/liujianghong/WebstormProjects/ 
hello-react/node modules/spawn-sync 

> node postinstall 

>uglifyjs-webpack-plugin@0.4.6 postinstall/Users/liujianghong/ 
WebstormProjects/hello-react/node modules/uglifyjs-webpack-plugin 

> node lib/post install.js 

+ react-dom@16.3.2 

+ react@16.3.2 

+ react-scriptsel.1.4 

added 1597 packages in 67.109s // 依 赖 包 下 载 完 成 ， 共 花费 时 间 为 67.109s 

Success! Created hello-react at /Users/liujianghong/WebstormProjects/ 
hello-react 

Inside that directory, you can run several commands: 


// 提 示 开发 者 可 以 用 到 以 下 几 个 命令 


npm start / /启动 部 署 到 服务 
Starts the development server. 
npm run build // 把 app 打包 到 静态 资源 中 
Bundles the app into static files for production. 
npm test // 启 动 测试 
Starts the test runner- 
npm run eject // 移 除 项 目的 单一 依赖 构建 


Removes this tool and copies build dependencies, configuration files 
and scripts into the app directory. If you do this, you can't go back! 
We suggest that you begin by typing: 
// 提 示 开 发 者 ， 可 以 通过 终端 进入 项 目 根 目录 ， 执 行 npm start 命令 启动 项 目 
cd /Users/liujianghong/WebstormProjects/hello-react 
npm start 
Happy hacking! 
Done //React 项 目 构 建 完成 


接 下 来 , 进入 WebStorm 的 Terminal 模式 (在 主 界面 下 方 单 击 Terminal 选项 ) ,执行 npm 
start 命令 ， 项 目 进 行 构建 后 运行 ， 终 端 提示 如 图 2-6 所 示 的 信息 。 


23 


React.js 实战 


Local. 


On Your Network: 


9] 
图 2-6 终端 提示 项 目 已 运行 


在 终端 提示 中 ， 项 目 在 浏览 器 的 地 址 为 http://localhost:3000/ 或 者 为 
http://192.168.0.104:3000/ (192.168.0.104 是 笔者 电脑 的 IPv4 地 址 ， 在 真正 搭建 项 目 时 ,该 人 Pp 
改 为 读者 的 本 地 IP) 。create-react-app 在 构建 项 目 时 ， 端 口号 默认 设置 为 3000。 如 果 开发 者 
想 修 改 端 口号 ， 可 以 在 node_modules/react-scripts/scripts/start.js 文件 中 修改 ， 该 文件 配置 了 项 
目 启动 的 他 以 及 端口 号 ， 代 码 如 下 : 

const DEFAULT PORT = parseInt (process.env.PORT, 10) || 3000; // 端 口号 修改 处 

const HOST = process.env.HOST || "0.0.0.0'7 


至 此 ，React 的 第 一 个 项 目 已 经 可 以 访问 ， 打 开 浏 览 器 ， 输 入 地 址 “http://localhost:3000/” 
或 者 “http://192.168.0.104:3000/” 即 可 访问 运行 效果 ， 如 图 2-7 所 示 。 


oe / 国 nect /p> 


© © localhost 


Welcome to React 


To get started, edit src/App. is and save to reload. 


图 2-7 第 一 个 React App 运行 效果 
create-react-app 创建 项 目的 默认 路 径 是 C:\Users\ 机 器 名 \WebstormProjects， 默 认 文件 目录 
如 下 : 
| 一 node _ modules 
上 一 README .md 
| 一 package-lock.json 
| 一 package.json 
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上 一 public 
| oo favicon.ico 
| Oo index.html 


| [一 一 manifest.json 
ee 


Co App.css 
3pp:j3 
Fo app.test.js 
Oo index.css 
| 一 一 index.js 
| logo.svg 


[一 一 registerServiceWorker.js 


node modules: 该 目录 里 放 的 是 项 目 需要 的 各 种 依赖 模块 。 

README.md: 该 文件 会 写 一 些 关 于 项 目 说 明 的 内 容 。 

package-lock.json: 该 文件 用 来 记录 当前 状态 下 实际 安装 的 各 个 包 的 来 源 以 及 版 本 号 。 
package.json: 该 文件 用 来 定义 依赖 关系 树 ， 以 及 各 个 依赖 模块 的 版 本 范围 。 

public: 该 目录 的 文件 被 index.html 引用 。 

src: 该 目录 存放 源码 以 及 引用 的 一 些 .css、.js 文件 ， 只 有 该 目录 下 的 文件 才 会 被 
webpack 识别 。 


雷 初学 者 不 用 害怕 这 么 多 文件 ， 本 书 前 几 章 的 示例 都会 采用 直接 引入 React 的 方法 来 学 习 
t React 基础 ， 只 需要 一 个 HTML 文件 就 能 搞定 。 


有 .4 与 传统 jQuery 对 比 


jQuery 是 由 约翰 . 雷 西 格 (John Resig) 在 2006 年 1 月 份 发 布 的 一 套 跨 浏览 器 JavaScript 
库 ， 极 大 地 简化 了 HTML 与 JavaScript 之 间 的 操作 。 当 时 深 受 前 端 开 发 人 员 的 欢迎 ，jQuery 
在 操作 DOM、 处 理事 件 等 方面 带 来 了 福音 ， 使 得 开发 效率 得 到 空前 提升 。 

随 着 时 间 慢 慢 推移 ， 人 们 在 开发 一 些 比较 复杂 的 大 型 项 目 时 ， 传 统 的 jQuery 变 得 越 来 越 
难 用 : 一 方面 是 性 能 问题 ， 由 于 jQuery 经 常 性 地 操作 DOM 元 素 ， 会 消耗 大 量 的 运行 时 间 ; 
另 一 方面 ,用 jQuery 去 编写 复杂 的 DOM 操作 , 代码 会 有 大 量 堆积 现象 , 很 难 维护 当然 ,jQuery 
流行 多 年 , 自然 有 其 独特 的 优点 ， 和 当下 流行 的 React 相 比 , 各 有 秋色 ,只 是 分 项 目 类 型 而 已 。 
岗 在 要 实现 一 个 数值 增加 功能 ， 思 路 大 概 为 ， 在 HTML 中 定义 两 个 元 素 ， 一 个 为 段落 标 
里 来 显示 数值 大 小 ; 另 一 个 为 按钮 ,用 来 触发 数值 增加 事件 。 jQuery 的 写法 如 示例 2-4 所 


六 网 
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【示例 2-4 jQuery 实现 数值 增加 功能 】 


<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title> 数 值 增加 </title> 
<script src="jquery-3.3.1.min.js"></script> 
<script type="text/javascript"> //jQuery 实现 逻辑 功能 
$ (function () { 
var num = 1; 
$(".myBtn") .click(function(){ // 获 取 DOM 元 素 ， 并 为 其 绑 定单 击 事件 
Dum ++7 
$("p") .html (num) 
} 
} 
</script> 
</head> 
<body> 
<div> 
<div> 
<p>1</p> 
<button class="myBtn"> 增 加 器 </button> 
</div> 
</div> 
</body> 
</html> 


该 示例 中 用 到 的 两 个 标签 在 <body></body> 中 定义 ，jQuery 首先 利用 选择 器 来 获取 需要 用 
到 的 两 个 DOM 元 素 ， 然 后 进行 逻辑 运算 之 后 ， 再 赋值 给 DOM 元 素 。jQuery 更 多 关注 的 是 实 
现 逻 辑 过 程 ， 然 后 操作 DOM 改变 其 状态 。 

下 面 用 React 实现 同样 的 功能 ， 如 示例 2-5 所 示 。 


【示例 2-5 ”React 实现 数值 增加 功能 


本 书 有 很 多 示例 只 实现 了 单一 功能 ， 为 描述 方便 ， 使 用 <script></script> 直 接 引入 React， 
这 样 只 需要 一 个 HIML 文件 即 可 ， 无 须 配置 。 待 学 习 到 第 8 章 React 架构 时 ， 会 使 用 脚 
手 架 搭建 的 整体 项 目 来 介绍 示例 。 


一 一 


<!DOCTYPE html> 

<html lang="en"> 

<head> 
<meta charset="UTF-8"> 
<title>MyButton</title> 
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<script crossorigin src="https://unpkg.com/react@16/umd/ 
react .development .js"></script> 
<script crossorigin src="https://unpkg.com/react-dom@16/umd/ 
react-dom.development .js"></script> 
<script src="https://unpkg.com/babel-standalone@6/ 
babel .min.js"></script> 
</head> 
<body> 
<div id="example"></div> 
<script type="text/babel"> 
class AddNumber extends React.Component{ 
constructor (props) { / /构造 函数 ， 用 来 初始 化 state 
super (props); 
this.state = {number:1}; 
this.addNum = this.addNum.bind (this); // 绑 定 addNum() 方 法 


1 
addNum() { // 数 值 增加 操作 


this .setState ({ 
number:this.state.number+1 
Ey 


下 
render() { // 泻 染 DOM 元 素 


return ( 
<div> 
<p>{this.state.number}</p> 
<button onClick={this.addNum}> 增 加 器 </button> 
</div> 
); 


} 
ReactDOM.render ( 
<AddNumber />， 
document .getElementById('example') 
); 
</script> 
</body> 
</html> 


React 的 实现 比较 整体 ， 定 义 一 个 类 AddNumber， 其 内 部 既 实现 了 逻辑 操作 ， 也 泻 染 了 
DOM 元 素 ， 并 且 其 状态 值 用 state 来 跟踪 。 当 state 发 生变 化 时 ，render() 方 法 才 会 把 最 后 的 结 
果 进 行 DOM 演 染 。 

React 相对 jQuery 有 如 下 几 点 优势 : 

@ ”React 的 组 件 化 要 比 jQuery 的 随时 操作 DOM 方式 更 整体 ， 对 于 开发 者 来 说 ，React 
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的 这 种 方式 写 起 来 更 加 舒服 ， 代 码 写 起 来 会 更 优雅 。 

@@ ”React 的 关注 点 更 多 在 组 件 的 state 上 ， 而 不 用 担心 组 件 有 没有 更 新 ， 因 为 React 如 果 
认为 state 发 生变 化 , 会 自动 调用 render() 方 法 进行 DOM 泻 染 .。 但 是 jQuery 需要 开发 
者 自己 完成 这 些 事情 。 

@ React 中 采用 了 虚拟 DOM 技术 ， 如 果 state 中 间 发 生 了 很 多 次 变化 ， 但 是 第 一 次 和 最 
后 一 次 的 状态 是 相同 的 ， 那 React 会 认为 该 组 件 状态 未 更 改 ， 不 会 进行 真正 的 DOM 
泻 染 ， 但 是 jQuery 不 一 样 ，jQuery 需要 对 每 一 次 的 状态 变化 进行 DOM 操作 ， 这 样 
会 浪费 页 面 的 很 多 运行 时 间 ， 性 能 相对 React 来 说 差 得 多 。 

@ ”如果 是 一 个 复杂 项 目 ， 采 用 React 的 组 件 化 思想 ， 耦 合 度 较 低 ， 多 人 合作 开发 ， 各 个 
模块 相对 独立 ， 后 期 好 维护 ; 用 jQuery 写 一 些 大 型 复杂 的 项 目 ， 如 果 没 有 一 个 好 的 
架构 组 织 ， 后 期 的 项 目 维护 会 变 得 越 来 越 难 。 


AP 


2。 了 ”React 调试 


调试 可 以 理解 为 一 个 寻找 程序 错误 的 过 程 。 程序 调试 是 一 个 开发 人 员 必 须 具备 的 能 力 , 调 
试 程序 的 方法 有 多 种 : 
@ “手动 调试 。 早 期 JavaScript 程序 的 调试 ， 没有 辅助 工具 ， 开 发 人 员 需 要 手动 在 程序 中 
输出 日 志 ， 比 如 利用 console.log() 或 者 alert() 来 进行 错误 排查 。 
@ 利用 工具 来 调试 . 随 着 浏览 器 的 不 断 改进 , 各 大 浏览 器 提供 了 JavaScript 的 调试 功能 ， 
开发 者 可 以 利用 浏览 器 提供 的 工具 来 进行 程序 调试 。 
React 能 够 发 展 如 此 之 快 ， 其 调试 功能 强大 ， 也 起 着 举足轻重 的 作用 ， 本 节 讲 解 React 程 
序 如 何 进行 调试 。 


2.5.1 安装 Chrome 插件 


打开 Chrome 浏览 器 , 输入 网 址 “https://chrome.google.com/webstore/category/extensions”， 
进入 Chrome 网 上 应 用 商店 。 输 入 关键 字 “React Developer Tools” 进 行 搜索 ， 如 图 2-8 所 示 。 

单 击 “ 添 加 至 CHROME” 按 钮 ， 即 可 安装 。 然 后 打开 Chrome 浏览 器 ， 从 主 菜 单 中 选择 
“更 多 工具 ”|“ 开 发 者 工具 ”选项 (或 按 F12 键 )， 如 果 控 制 台 有 React 选项 ， 表 明 React 
的 调试 工具 已 安装 成 功 ， 如 图 2-9 所 示 。 
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人 Chrome 网 上 应用 店 
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| Google 严 品 
Etends the Developer Tcols adding a sidebar that displays React Component Herarchy, 人 
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让 让 去 半 去 RM 上 


图 2-8 Chrome 网 上 应 用 商店 中 的 React Developer Tools 搜索 结果 


图 ® DeveloperTools - http://iocalhost:63342/react-book-demofE7XACHAC2HETLABKAOPLETHAANEANEAKBENEB2- 
民 名 | Eements Console Sources Network Perormance Memory 。 Applcation securty Audts [Esc A1 


html lang="en"> Styles Computed Event Listeners DOM Breakpoints Properties Accessibllty 


bp <head>..</head> | Fiher 
[iv <body> = 58 
p <div id="example”>-</div> set etyle 《 


shov .cts +, 


* <script type="text/babel">.</script> 
</body> body { 
</htmt> display: block; 
margin: » Bpx; 


user agent stylesheet 


图 2-9 React 调试 插件 安装 成 功 


| 国内 查看 Chrome 的 应 用 商店 有 很 多 限制 。 如 果 是 苹果 用 户 , 建议 使 用 WiseVPN, 笔者 就 
[ 是 用 的 这 个 VPN， 速 度 很 快 ， 也 便宜 。 如 果 是 Windows 用 户 ， 可 以 在 网 上 找 找 有 没有 更 
好 的 选择 。 


2.5.2 ”Chrome 插件 的 使 用 
这 里 以 2.4 节 中 的 【示例 2-5】 为 例 , 讲解 如 何 利 用 React Developer Tools 调试 React 程序 。 
(1) 首先 运行 程序 ， 并 打开 Chrome 浏览 器 的 开发 者 模式 ， 如 图 2-10 所 示 。 
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图 2-10 调试 界面 


(2) 在 调试 区 展示 的 是 项 目 组 件 ， 鼠 标 悬 浮 在 组 件 之 上 ， 单 击 鼠 标 右 键 ， 会 出 现 Show 
AddNumber source 选项 (AddNumber 是 组 件 名称 ) ， 如 图 2-11 所 示 。 


<p>l</p> 
<button onClick=bound ad Scrollto node 
</div> Copy element name 
bom Find the DOM node 


[em | 


图 2-11 组 件 源码 选项 


(3) 单 击 Show AddNumber source 选项 ， 进 入 组 件 源码 页 面 ， 就 可 以 设置 断 点 进行 调试 
了 ， 如 图 2-12 所 示 。 


|@ locaihost 63342/react-book-demo/ 限 2 瘟 / 示 例 2-6/React 尖 二 htm 让 =ulenBo81nv3uie13g35bpmbp68 


RD Bomoms Goneoe Souewe Mowom Poromares Womey Acplcatcn Seamy Auahe Foct 
日 Inine Babel sorpt x 


lace Newmber (exteng Meact.conponentt 
) 


1 
iS, ad = thi5vaddim,bindtrhisl3 


tthis, state. nunper}</p> 
<butron onCUick={5hls ,ad0Nunj> 夫 加强 </buttony 
dam 
四 


2-12 ”调试 示意 图 
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MAC 用 户 的 单 步调 试 快 捷 键 为 +F8。Windows 用 户 直接 按 F8 键 就 是 单 步调 试 。 其 实 上 
述 调试 方法 和 以 前 传统 的 JavaScript 调试 是 一 样 的 。 


各 React Developer Tools 只 对 React 程序 调试 有 效 ， 对 React Native 是 无 效 的 。 | 
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React 组 件 是 React 框架 的 一 个 重点 ， 其 实 React 诞生 的 初衷 就 是 为 了 组 件 化 ， 也 可 以 理 
解 为 实现 特定 功能 的 模块 化 思想 。 传统 的 Web 页 面 是 由 html 基本 标签 构成 的 , 但 在 React 中 ， 
构建 页 面 的 基本 单位 是 React 组 件 。 读 者 在 理解 React 组 件 时 , 可 以 将 其 理解 为 混合 了 JavaScript 
具有 更 好 表达 能 力 的 html 元 素 。 在 具备 React 组 件 的 熟练 编写 能 力 后 ， 读 者 可 以 真正 体会 到 
高 内 聚 、 低 耦合 、 代 码 高 度 复 用 、 项 目 迭 代 快 等 诸多 优点 。 


理解 组 件 化 思想 


React 中 的 组 件 化 思想 ， 可 以 理解 为 把 具有 独立 功能 的 UI 部 分 进行 了 封装 

对 MVC 开发 模式 熟悉 的 读者 应 该 知道 ，MVC 模式 是 将 模型 、 视 图 、 控 制 器 进行 分 离 ， 
从 而 实现 表现 层 、 数 据 层 及 控制 层 的 独立 。 其 中 ， 以 往 的 开发 者 对 表现 层 进行 松 耦 合 优化 时 ， 
基本 是 从 技术 的 角度 对 UI 进行 分 离 的 。 而 React 提供 了 一 个 新 的 思路 ， 从 功能 的 角度 将 UI 
站 同一 人 ee 加 的 组 成 吉大 通 寺 小 组 村 构建 成 大 组 件 的 方式 来 实现 。 这 样 组 件 化 思 


@ ”可 组 合 性 : 定义 了 一 个 { 开 组 件 后 ， 可 以 和 其 他 组 件 进行 并 列 或 者 谋 套 使 用 ， 多 个 小 
组 件 还 可 以 构建 一 个 复杂 组 件 ， 一 个 复杂 的 组 件 也 可 以 分 解 成 多 个 功能 简单 的 小 组 
件 。 

@ ”可 重用 性 : 定义 后 的 组 件 功能 是 相对 独立 的 ， 在 不 同 的 UI 场景 中 ， 可 以 重复 使 用 。 

@ ”可 维护 性 : 每 个 组 件 的 实现 逻辑 都 仅 限于 自身 ,不 涉及 其 他 组 件 ， 这 样 的 可 维护 性 较 


读 


疝 。 


组 件 之 间 的 通信 


在 React 进行 项 目 开 发 中 ， 难 免 会 进行 组 件 之 间 的 信息 传递 操作 ， 即 组 件 间 的 通信 。 通 信 
可 以 简单 地 理解 为 组 件 之 间 的 数据 传递 ， 如 父子 组 件 之 间 的 通信 、 同 级 组 件 之 间 的 通信 等 。 
在 学 习 组 件 通 信之 前 ， 读 者 应 该 先 对 React 中 的 state 和 props 有 所 掌握 。state 和 props 是 
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React 中 的 两 种 数据 方式 ， 无 论 是 state 数据 还 是 props 数据 只 要 发 生 数 据 改变 ， 就 会 重新 泻 染 
组 件 。 那 么 本 节 就 来 讲述 state 和 props 的 使 用 方法 。 


3.2.1 props 


props 是 properties 的 简称 ， 范 围 为 属性 。 在 React 中 的 组 件 都 是 相对 独立 的 ， 一 个 组 件 可 


以 定义 接收 外 界 的 props， 在 某 种 意义 上 就 可 以 理解 为 组 件 定义 了 一 个 对 外 的 接口 。 组 件 自身 
相当 于 一 个 函数 ，props 可 以 作为 一 个 参数 传 入 ， 旨 在 将 任意 类 型 的 数据 传 给 组 件 。 


props 的 使 用 方法 如 示例 3-1 所 示 。 
【示例 3-1 props 简单 使 用 】 


<!DOCTYPE html> 

<html lang="en"> 

<head> 
<meta charset="UTF-8"> 
<title>props 简单 使 用 </title> 
<script crossorigin 


src="https://unpkg.com/react@16/umd/react .development .js"></script> 


<script crossorigin 


src="https://unpkg.com/react-dom@16/umd/react-dom.development .js"></script> 


<script 


src="https://unpkg.com/babel-standalone@6/babel .min.js"></script> 


</head> 
<body> 
<div id="root"></div> 
<script type="text/babel"> 
class SayName extends React.Component{ 
render() { //DoM 泻 染 
return ( 
<hl>Hello {this.props.name}</h1l> 
); 


} 

ReactDOM. render (<SayName name=" 天 虹 " />, document .getElementById('root')); 
</script> 
</body> 
</html> 


在 上 面 的 例子 中 ， 先 定义 一 个 名 为 SayName 的 组 件 〈 注 意 : 在 React 中 定义 组 件 一 定 要 
大 驼峰 法 , 首 字母 要 大 写 ), 在 render0 中 返回 一 个 <h1> 的 DOM 节点 , 整体 泻 染 <SayName> 


这 个 组 件 的 时 候 ， 用 this.props.name 来 获取 name 属性 。 当 然 props 也 可 以 在 挂 载 组 件 的 时 候 
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为 其 设置 初始 值 ， 如 示例 3-2 所 示 。 
【示例 3-2 ”初始 化 props】 


<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title> 初 始 化 props</title> 
<script crossorigin 
src="https://unpkg.com/react@16/umd/react .development .js"></script> 
<script crossorigin 
src="https://unpkg.com/react-dom@16/umd/react-dom.development .js"></script> 
<script 
src="https://unpkg.com/babel-standalone@6/babel .min.js"></script> 
</head> 
<body> 
<div id="root"></div> 
<script type="text/babel"> 
class SayName extends React.Component{ 
static defaultProps = { // 初 始 化 props 
name:' 天 虹 ' 
} 
render() { 
return ( 
<hl>Hello {this.props.name}</h1l> 
); 


} 
ReactDOM.render (<SayName />, document .getElementById('root')); 
</script> 
</body> 
</html> 
props 一 般 不 允许 更 改 , 所 以 这 里 用 static 关键 字 来 定义 默认 的 props 值 。 在 ES5 中 初始 化 
props 使 用 getDefaultProps() 方 法 来 实现 ， 在 ES6 中 统一 使 用 static 类 型 来 定义 。 


坊 Props 的 属性 值 不 允许 组 件 自己 修改 , 如果 需要 修改 props 值 , 请 使 用 state (后 面 会 介绍 ) 。 


上 


3.2.2 state 


state 为 状态 之 意 。 组 件 在 React 中 可 以 理解 为 是 一 个 状态 机 ， 组 件 的 状态 就 是 用 state 来 
记录 的 。 相 对 props 来 说 ，state 是 用 在 组 件 内 部 并 且 是 可 以 修改 的 。 
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在 state 的 操作 中 ， 基 本 操作 包括 初始 化 、 读 取 和 更 新 。 下 面 通过 一 个 示例 来 介绍 state 的 
基本 操作 ， 实 现 改变 DOM 元 素颜 色 。 


【示例 3-3 ”利用 state 改变 DOM 元 素颜 色 】 


<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title> 利 用 state 改变 DOM 元 素颜 色 </title> 
<script crossorigin src="https://unpkg.com/react@16/umd/ 
react.development .js"></script> 
<script crossorigin src="https://unpkg.com/react-dom@16/umd/ 
react-dom.development .js"></script> 
<script src="https://unpkg.com/babel-standalone@6/ 
babel.min.js"></script> 
</head> 
<body> 
<div id="root"></div> 
<script type="text/babel"> 
class ChangeColor extends React.Component{ 
constructor(props) { 
super (props); 
this.state = {isRed: true}; // 在 构造 函数 中 对 state 进行 初始 化 
this.handleClick = this.handleClick.bind(this); 
// 在 ES6 中 ，this 需要 在 构造 函数 中 绑 定 后 才能 生效 
} 
handleClick(){ 
this .setState ( (prevstate, props) => ({ 
isRed: !prevSstate.isRed 
1)); 
} 
render() { 
Var redstyle={ 
color:"red™ 
} 
Var blueStyle={ 
he 的 LU 
} 
return ( 
<div> 
<hl style={this.state.isRed ? redstyle:bluestyle}> 天 虹 </h1> 
<button onclick={this.handleclick}> 点 击 改变 颜色 </button> 
</div> 
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); 
i 
ReactDOM.render (<ChangeColor />, document .getElementById('root')); 
</script> 
</body> 
</html> 


在 上 面 的 例子 中 ，state 的 初始 化 放 在 constructor 的 构造 函数 中 ,该 例子 中 isRed 就 是 一 个 
组 件 的 state, 初始 化 为 true。 接 下 来 在 组 件 泻 染 中 , 即 调用 rend 函数 时 ,<h1> 中 的 this.state.isRed 
值 为 tue， 则 style 为 redStyle， 即 红色 。 在 <button> 中 绑 定 handleClick 方法 ， 利 用 setState 来 
改变 state 中 的 isRed 值 。setState 方法 有 两 个 参数 ， 官 方 给 出 的 说 明 如 下 : 


void setState( 
functionlobject nextSstate, 


[function callback] 


) 
第 一 个 参数 表示 的 是 要 改变 的 state 对 象 ， 第 二 个 参数 是 一 个 回调 函数 ， 这 个 回调 函数 是 
在 setState 的 异步 操作 执行 完成 并 且 组 件 已 经 泻 染 后 执行 的 。 所 以 ， 可 以 通过 该 方法 获取 之 前 
的 状态 值 prevState。 该 示例 就 是 通过 setState 获取 之 前 的 状态 值 prevState, 对 其 进行 更 新 操作 ， 
从 而 重新 泻 染 组 件 。 


3.2.3 ”父子 组 件 通信 


在 介绍 组 件 通信 之 前 ， 先 引入 一 个 概念 : 数据 流 。 在 React 中 ， 数 据 流 是 单 向 的 ， 通 过 
props 从 父 节点 传递 到 子 节点 ， 如 果 父 节点 的 props 发 生 改 变 ， 则 React 会 遍历 整 棵 组 件 树 ， 从 
而 泻 染 用 到 这 个 props 的 所 有 组 件 。 

父 组 件 更 新 子 组 件 , 可 以 直接 通过 props 进行 信息 传递 , 实现 更 新 操作 ， 如 示例 3-4 所 示 。 


【示例 3-4 子 父 组 件 通 信 】 


<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title> 子 父 组 件 通 信 </title> 
<script crossorigin 
src="https://unpkg.com/react@16/umd/react .development .js"></script> 
<script crossorigin 
src="https://unpkg.com/react-dom@16/umd/react-dom.development .js"></script> 
<script 
src="https://unpkg.com/babel-standalone@6/babel .min.js"></script> 
</head> 
<body> 
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<div id="root"></div> 
<script type="text/babel"> 
class Child extends React.Component{ 
constructor (props){ 
super (props); 
thisustate = 1 
; 
render (){ 
return ( 
<div> 
{this.props.text} 
</div> 


} 
class Father extends React.Component{ 


constructor (Props){ 

super (props); 

this.state = {} 
} 
refreshChild(){ 

return (e)=>{ 

this.setState({ 
childText: " 父 组 件 更 新 子 组 件 成 功 "， 


}) 


} 


render(){ 
return ( 
<div> 
<button onClick={this.refreshChild()} > 
父 组 件 更 新 子 组 件 
</button> 
<Child text={this.state.childText || " 子 组 件 更 新 前 "} /> 
</div> 


} 
ReactDOM. render (<Father />, document .getElementById('root')); 


</script> 
</body> 
</html> 


Td 


在 父 组 件 <Father /> 中 ，dom 节点 <button> 绑 定 refreshChild() 方 法 ， 在 refreshChild() 方 法 9 
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直接 修改 state 值 ， 传 给 子 组 件 即 可 。 
子 组 件 更 新 父 组 件 ， 需 要 父 组 件 传 一 个 回调 函数 给 子 组 件 ， 然 后 子 组 件 调用 ， 就 可 以 触发 
父 组 件 更 新 了 ， 如 示例 3-5 所 示 。 


【示例 3-5 ”父子 组 件 通信 】 


<!DOCTYPE html> 

<html lang="en"> 

<head> 
<meta charset="UTF-8"> 
<title> 父 子 组 件 通信 </title> 


<script crossorigin src="https://unpkg.com/react@16/umd/ 


react .development .js"></script> 
<script crossorigin src="https://unpkg.com/react-dom@16/umd/ 
react-dom.development .js"></script> 
<script src="https://unpkg.com/babel-standalone@6/ 
babel.min.js"></script> 
</head> 
<body> 
<div id="root"></div> 
<script type="text/babel"> 
class Child extends React.Component{ 
constructor (props){ 
super (props); 
this.state = {} 
} 
render(){ 
return ( 
<div> 
<button onClick={this.props.refreshParent}> 
更 新 父 组 件 
</button> 
</div> 


} 
class Father extends React.Component{ 
constructor (props){ 
super (props); 
this.state = {} 
} 
refreshParent (){ 
this .setState({ 
parentText: " 子 组 件 更 新 父 组 件 成 功 "， 
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} 
} 
render () { 
return ( 
<div> 
<Child refreshParent={this.refreshParent.bind (this)} /> 
{this.state.parentText || " 父 组 件 更 新 前 "} 
</div> 


1 
ReactDOM.render (<Father />，document .getElementById('root')); 


</script> 
</body> 
</html> 


子 组 件 <Child /> 调用 父 组 件 的 refreshParent() 方 法 ， 触 发 后 修改 state 值 ， 从 而 更 新 父 组 件 
内 容 。 


3.2.4” 同 级 组 件 通信 
所 谓 同 级 组 件 ， 即 组 件 们 有 一 个 共同 的 祖先 ,但 其 各 自 的 辈分 一 样 。 同 级 组 件 之 间 的 通信 
有 两 种 方式 : 
@ 第 一 种 : 组 件 与 组 件 之 间 有 一 个 共同 的 父 组 件 ， 可 以 通过 父 组 件 来 通信 ， 即 一 个 子 组 
件 可 以 通过 父 组 件 的 回调 函数 来 改变 props， 从 而 改变 另 一 个 子 组 件 的 props。 
@ 第 二 种 : 组 件 与 组 件 之 间 有 共同 的 祖先 , 但 不 一 定 是 亲 兄 弟 ， 这样 如 果 通 过 父 组 件 一 
级 一 级 去 调用 ， 效 率 会 很 差 。React 提供 了 一 种 上 下 文 方式 ， 允 许 子 组 件 可 以 直接 访 
问 祖先 组 件 的 属性 和 方法 ， 从 而 使 效率 得 到 很 大 的 提升 。 


兄弟 组 件 通信 ， 如 示例 3-6 所 示 。 
【示例 3-6 ”兄弟 组 件 通信 】 


<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title> 见 弟 组 件 通信 </title> 
<script crossorigin src="https://unpkg.com/react@16/umd/ 
react .development .js"></script> 
<script crossorigin src="https://unpkg.com/react-dom@16/umd/ 
react-dom.development .js"></script> 
<script src="https://unpkg.com/babel-standalone@6/ 


babel .min.js"></script> 
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} 
render (){ 
return ( 
<div> 
<h2> 兄 弟 组 件 沟通 </h2> 
<Brotherl refresh={this.refresh()}/> 
<Brother2 text={this.state.text}/> 
</div> 


} 
上 
ReactDOM.render (<Father />，document .getElementById('root')); 
</script> 
</body> 
</html> 


<Brotherl/> 和 <Brother2/> 是 两 个 兄弟 组 件 ， 二 者 有 一 个 共同 的 父 组 件 ， 第 一 个 子 组 件 
<Brother1/> 可 以 通过 父 组 件 <Father/> 的 回调 方法 修改 state， 当 父 组 件 的 state 有 了 改动 之 后 ， 
其 改动 的 state 会 传 给 其 所 有 子 组 件 后 重新 泻 染 ， 这 样 就 达到 了 兄弟 节点 之 间 的 通信 。 


习 。s] 组 件 生命 周期 


所 谓 的 生命 周期 ， 可 以 用 有 生命 的 人 体 来 表达 这 个 意思 。 从 出 生 到 成 长 ， 最 后 到 死亡 ， 这 
个 过 程 的 时 间 可 以 理解 为 生命 周期 。React 的 生命 周期 同 理 也 是 这 么 一 个 过 程 。 在 React 的 工 
作 中 ， 生 命 周 期 也 一 直 存在 于 工作 过 程 中 。React 的 生命 周期 严格 分 为 三 个 阶段 ， 挂 载 期 (也 
叫 实例 化 期 ) 、 更 新 期 (也 叫 存在 期 、 镍 载 期 (也 叫 销毁 期 》 。 在 每 个 周期 中 ，React 都 提 
供 了 一 些 钧 子 函数 , 读者 可 以 依据 这 些 钧 子 函 数 很 好 地 理解 React 的 生命 周期 是 一 个 怎样 的 过 
程 。React 的 生命 周期 描述 如 下 : 

@ 挂 载 期 : 一 个 组 件 实例 初次 被 创建 的 过 程 。 

@ 更 新 期 组 件 在 创建 后 再 次 泻 染 的 过 程 。 

@。 却 载 期 : 组 件 在 使 用 完 后 被 销毁 的 过 程 。 


3.3.1 组 件 的 挂 载 
组 件 在 首次 创建 后 ， 进 行 第 一 次 的 泻 染 称 为 挂 载 期 。 挂 载 期 有 一 些 方法 会 被 依次 触发 ， 列 
举 如 下 : 


@ constructor ( 构造 函数 ， 初 始 化 状态 值 ) 
@ getImitialState (设置 状态 机 ) 
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getDefaultProps ( 获取 默认 的 props ) 
componentWillMount ( 首次 泻 染 前 执行 ) 

render ( 泻 染 组 件 ) 

componentDIdMount ( render 泻 染 后 执行 的 操作 ) 


这 里 用 一 个 示例 来 直观 感受 一 下 组 件 挂 载 这 个 阶段 的 执行 过 程 ， 如 示例 3-7 所 示 。 
【示例 3-7 组件 挂 载 】 


<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title> 组 件 挂 载 </title> 
<script crossorigin src="https://unpkg.com/react@16/umd/ 


react .development .js"></script> 
<script crossorigin src="https://unpkg.com/react-dom@16/umd/ 
react-dom.development .js"></script> 
<script src="https://unpkg.com/babel-standalone@6/ 
babel.min.js"></script> 
</head> 
<body> 
<div id="root"></div> 
<script type="text/babel"> 
class HelloWorld extends React.Component { 
constructor(props) { 
super (props); 
console.10g ("1. 构造 函数 ") 
this.state = {}; 
console.10g ("2. 设置 状态 机 ") 
} 
static defaultProps={ 
name:"React™" 
} 
componentWillMount (){ 
console.10g('3. componentWillMout 完成 首次 演 染 前 调用 ') 
1 
render () { 
console.1og('4. 组 件 进行 泻 染 ') ; 
return( 
<div> 
<div>{this.props.name}</div> 
</div> 
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bi 
componentDidMount () { 
console.10g('5. componentDidMount render 演 染 后 的 操作 ' ) 
La 
ReactDOM.render (<HelloWorld />, document .getElementById('root')); 


</script> 
</body> 
</html> 


这 里 用 ES6 的 标准 来 呈现 组 件 的 挂 载 过 程 ， 在 组 件 创建 的 时 候 会 按照 上 述 代码 中 的 
console 依次 输出 相关 内 容 。 在 ES6 中 是 不 使 用 getInitialState 和 getDefaultProps 两 个 方法 的 ， 
这 是 ES5 的 方法 。 读 者 注意 ，ES5 中 React.createClass 渐渐 要 被 FaceBook 官方 废弃 ， 建 议 以 
后 的 React 写法 ， 最 好 用 ES6 标准 来 写 。 设 置 state 的 初始 值 以 及 获取 props， 已 经 在 上 述 示例 
中 实现 : 设置 state 初始 值 在 构造 函数 中 用 this.state 来 处 理 , 获取 props 用 defaultProps 来 处 理 。 

另外 还 需要 注意 ， 在 React 组 件 中 ，render 方法 必须 实现 ， 如 果 没 有 实现 会 报错 ， 其 他 的 
方法 可 以 不 实现 ， 因 为 除了 render 方法 外 ， 其 他 方法 在 父 类 Component 中 都 有 默认 实现 。 

上 述 代码 在 浏览 器 上 的 效果 如 图 3-1 所 示 。 
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， 构 造 隐 数 
， 设 置 状态 机 


componentWiLUMout 完成 首次 演 染 前 调用 


组 件 进行 渲染 
，componentDidMount render 泻 染 后 的 操作 


图 3-1 组 件 挂 载 中 的 函数 执行 结果 


组 件 的 更 新 


组 件 更 新 ， 指 的 是 在 组 件 初次 泻 染 后 ,进行 了 组 件 状态 的 改变 。 在 实际 项 目 中 ,组件 更 新 
是 经 常 性 操作 。React 在 生命 周期 中 的 更 新 过 程 包括 以 下 几 个 方法 : 


componentWillReceiveProps: 当 父 组 件 更 新 子 组 件 的 state 时 ， 该 方法 会 被 调用 。 
shouldComponentUpdate: 该 方法 决定 组 件 state 或 者 props 的 改变 是 否 需要 重新 泻 染 
组 件 。 

componentWillUpdate: 在 组 件 接受 新 的 props 或 者 state 时 ， 即 将 进行 重新 泻 染 前 调 
用 该 方法 ， 和 componentWillMount 方法 类 似 。 

componentDidUpdate: 在 组 件 重新 泻 染 后 调用 该 方法 ,和 componentDidMount 方法 类 似 。 


下 面 用 一 个 具体 示例 来 更 好 地 理解 组 件 更 新 过 程 。 
【示例 3-8 ”组件 更 新 】 


<!DOCTYPE html> 
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<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title> 组 件 更 新 </title> 
<script crossorigin src="https://unpkg.com/react@16/umd/ 
react .development .js"></script> 
<script crossorigin src="https://unpkg.com/react-dom@16/umd/ 
react-dom.development .js"></script> 
<script src="https://unpkg.com/babel-standalone@6/ 
babel.min.js"></script> 
</head> 
<body> 
<div id="root"></div> 
<script type="text/babel"> 
class HelloWorldFather extends React.Component{ // 父 组 件 
constructor(props) { 
super (props); 
this.updatechildProps = this.updateChildProps.bind (this); 
this.state = { // 初 始 化 父 组 件 state 


name: "React™" 


} 
updatechildProps () { // 更 新 父 组 件 state 
this .setState ({ 
name: "Vue" 
}) 
} 
render () { 
Feturn ( 
<div> 
<HelloWorld name={this.state.name}></HelloWorld> 
// 父 组 件 的 state 传递 给 子 组 件 
<button onClick={this.updateChildProps}> 更 新 子 组 件 props</button> 
</div> 


a 
class HelloWorld extends React.Component { 
constructor(props) { 
super (props); 
console.1og ("1. 构造 函数 ") 
console.1og ("2. 设置 状态 机 ") 
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componentWillMount (){ 
console.1og('3. componentWillMout 完成 首次 演 染 前 调用 ') 


componentWillReceiveProps (){ 
console.1o0g ("6. 父 组 件 更 新 子 组 件 props 时 ， 调 用 该 方法 ") 
} 
shouldComponentUpdate(){ 
console.10g ("7. 决定 组 件 props 或 者 state 的 改变 是 否 需 要 进行 重新 泻 染 ") 
return true; 
} 
componentWillUpdate(){ 
console.1og ("8. 当 接收 到 新 的 props 或 state 时 ， 调 用 该 方法 ") 
} 
render () { 
console.1og('4. 组 件 进行 泻 染 ') ; 
Feturn ( 
<div> 
<div>{this.props.name}</div> 
</div> 


} 
componentDidMount () { 
console.10g('5. componentDidMount render 演 染 后 的 操作 ' ) 
} 
componentDidUpdate () { 
console.1o0og ("9. 组 件 重新 被 泻 染 后 ， 调 用 该 方法 ") 


} 

ReactDOM.render (<HelloWorldFather />, document .getElementById('root')); 
</script> 
</body> 
</html> 


该 示例 是 建立 在 组 件 挂 载 示 例 基础 上 的 组 件 更 新 过 程 ,这 样 读者 对 生命 周期 的 整个 过 程 会 
有 更 好 的 理解 .上述 示例 描述 了 两 个 组 件 , 父 组 件 <HelloWorldFather/> 和 子 组 件 <HelloWorld/>。 
子 组 件 的 state 由 父 组 件 来 更 新 ,整体 的 实现 功能 为 , 子 组 件 首次 泻 染 , 属性 name 值 为 “React”， 
当 父 组 件 name 值 改 为 “Vue” 时 ， 子 组 件 的 state 随 之 发 生 改 变 ， 进 而 触发 组 件 生命 周期 中 更 
新 的 相关 操作 。 运 行 效果 如 图 3-2 所 示 。 
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§ Console x 


图 3-2 组 件 更 新 运行 效果 
从 第 6 步 到 第 9 步 为 组 件 更 新 过 程 。 


在 组 件 更 新 过 程 中 ， 需 要 注意 shouldComponentUpdate0 方 法 ， 如 果 该 方法 返回 值 为 false 
时 ， 组 件 将 不 进行 重新 浑 染 。 该 方法 如 果 能 用 的 恰到好处 ， 就 能 够 在 React 性 能 优化 方面 
起 到 一 定 作用 。 虽 然 说 React 的 性 能 已 经 可 以 了 ， 但 是 减少 没有 必要 的 泻 染 依然 可 以 进 一 
步 优 化 性 能 。 


3.3.3 组 件 的 卸载 


生命 周期 的 最 后 一 个 过 程 为 组 件 卸 载 期 ， 也 称 为 组 件 销毁 期 。 该 过 程 主要 涉及 一 个 方法 ， 
即 componentWillUnmount， 当 组 件 从 DOM 树 删除 的 时 候 调 用 该 方法 。 

这 里 以 示例 3-8 为 基础 , 通过 添加 组 件 销毁 的 方法 来 理解 生命 周期 中 的 最 后 一 个 组 件 卸 载 
环节 ， 如 示例 3-9 所 示 。 


【示例 3-9 组 件 卸 载 】 


<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title> 组 件 卸 载 </title> 
<script crossorigin src="https://unpkg.com/react@16/umd/ 
react .development .js"></script> 
<script crossorigin src="https://unpkg.com/react-dom@16/umd/ 
react-dom.development .js"></script> 
<script src="https://unpkg.com/babel-standalone@6/ 
babel .min.js"></script> 
</head> 
<body> 
<div id="root"></div> 
<script type="text/babel"> 
class HelloWorldFather extends React.Component{ 


46 


第 3 章 React 组 件 


constructor (Props) { 
super (props); 
this.updateChildProps = this.updateChildProps.bind(this); 
this.state = { 


name:"React™" 


} 
updatechildProps (){ 
this.setstate ({ 
name: "Vue" 
A 
} 


render(){ 
Feturn ( 
<div> 
<HelloWorld name={this.state.name}></HelloWorld> 
<button onClick={this.updateChildProps}> 更 新 子 组 件 props</button> 
</div> 


} 
class HelloWorld extends React.Component { 


constructor(props) { 
super (props); 
console.10g ("1. 构造 函数 ") 
console.10g ("2. 设置 状态 机 ") 


componentWillMount (){ 
console.10g('3. componentWillMout 完成 首次 泻 染 前 调用 ') 


componentWillReceiveProps (){ 


console.10g ("6. 父 组 件 更 新 子 组 件 props 时 ， 调 用 该 方法 ") 


shouldCcomponentUpdate () 1{ 
console.10g ("7. 决定 组 件 props 或 者 state 的 改变 是 否 需 要 进行 重新 泻 染 ") 


return true; 


componentWillUpdate(){ 
console.10g ("8. 当 接 收 到 新 的 props 或 state 时 ， 调 用 该 方法 ") 


delComponent () { // 添 加 印 载 方法 
ReactDOM.unmountComponentAtNode (document .getElementById('root')); 
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render () { 
console.1o0g('4. 组 件 进行 泻 染 ') ; 
return( 
<div> 
<div>{this.props.name}</div> 
<button onClick={this.delCcomponent}> 务 载 组 件 </button> 
// 声 明 卸 载 按 钮 


</div> 


} 
componentDidMount () { 
console.10g('5. componentDidMount render 演 染 后 的 操作 ' ) 
componentDidUpdate () { 
console.10g ("9. 组 件 重新 被 泻 染 后 ， 调 用 该 方法 ") 
} 
componentWillUnmount () { // 组 件 逢 载 后 执行 
console.10g ("10. 组 件 已 被 销毁 ") 


下 

ReactDOM.render (<HelloWorldFather />，document .getElementById('root')); 
</script> 
</body> 
</html> 


上 述 示例 在 示例 3-8 的 基础 上 通过 添加 卸载 事件 来 印 载 组 件 ， 这 里 用 到 的 方法 为 
unmountComponentAtNode()， 参 数 为 DOM 的 ID， 当 组 件 卸 载 后 ， 调 用 生命 周期 中 的 印 载 钧 
子 方法 componentWillUnmount()。 效 果 如 图 3-3 所 示 。 


民间 | Eements Console Sources Network Peromance Memory 。 Application Security Audits React al1l : x 


加 @ | mp | Flter Defaut levels 加 Group simiar nidden | 冤 


A You are Using the in-browser Babel transformer, Be sure to precompile your scripts for production ~ https://babeljs,i babel.min,js:24 
g/docs/setup/ 
工 。 构 造 函数 


， 设置 状态 机 


Inline Babel script:28 
Inline Babel scr: 
。componentWittMout 完成 首次 泻 染 前 调用 JInline Babel scrir 
Inline Babel scr 
Inline Babel scr 


，componentDidMount render 泻 染 后 的 操作 
8， 组 件 已 被 销 蚂 


?| 


2 
3 
4。 组 件 进行 泻 染 
5 
1 


Inline Babel script:65 


图 3-3 组 件 卸 载 效果 


3.3.4 总 览 组 件 生 命 周期 


React 组 件 生命 周期 经 历 三 个 阶段 : 组 件 挂 载 期 、 组 件 更 新 期 、 组 件 卸 载 期 。 整 个 过 程 大 
致 可 以 用 图 3-4 来 描述 。 
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render() 
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false 


componentWillUnmount() 


中 
componentDidUpdate() 


图 3-4 React 组件 生 命 周 期 流程 图 


React 整个 生命 周期 提供 了 完整 的 钩子 方法 ， 这 些 方 法 伴随 着 整个 组 件 从 创建 到 销毁 。 
React 生命 周期 中 主要 做 的 事情 是 围绕 组 件 state 和 props 的 状态 改变 而 产生 的 一 系列 操作 。 读 
者 在 实际 项 目 开 发 中 ， 如 果 能 真正 理解 React 的 生命 周期 ， 对 编码 的 整体 性 会 有 很 好 的 把 握 。 


49 


第 4 章 
< 温 谈 React 事 件 系统 > 


一 个 前 端 项 目 ， 基 本 可 以 分 为 两 大 部 分 : 一 部 分 为 视觉 呈现 ， 另 一 部 分 为 功能 使 用 。 谈 到 
用 户 的 功能 操作 ， 多 数 情况 都 伴随 着 事件 发 生 ， 比 如 用 鼠标 单 击 一 个 按钮 发 送 消息 、 将 鼠标 悬 
浮 在 图 片上 显示 阴影 效果 等 。React 提供 了 一 套 非 常 完善 的 事件 系统 ， 其 基于 DOM 事件 体系 
之 上 ， 做 了 很 多 性 能 优化 以 及 浏览 器 兼容 等 改善 ， 给 开发 者 带 来 了 更 多 便利 。 本 章 主要 讲解 
React 的 事件 系统 。 


JavaScript 事件 机 制 


所 谓 事件 ， 简 单 可 以 理解 为 要 做 一 件 什么 事情 。 事 件 系统 ， 是 整个 事件 的 所 有 处 理 系统 。 
- 般 而 言 ， 事 件 系统 大 概 包 含 3 个 重要 因素 : 

@ 事件 源 : 动作 发 生 的 初始 点 。 

@ 事件 对 象 : 保存 事件 状态 。 

@ 事件 处 理 : 要 做 一 件 什么 事情 。 

JavaScript 是 一 门 单线 程 非 阻塞 的 脚本 语言 ， 非 阻塞 主要 体现 在 异步 功能 上 。 读 者 应 该 明 
白 ， 在 前 端 项 目 中 会 有 大 量 的 DOM 操作 或 者 IO 事件 等 ， 为 了 避免 出 现 阻塞 现象 ，JavaScript 
采用 了 事件 循环 机 制 来 解决 这 一 问题 。 所 谓 循环 机 制 ， 即 JavaScript 引擎 提供 了 一 个 执行 栈 和 
一 个 事件 队列 。 当 一 段 JavaScript 代码 执行 时 , 同步 代码 会 被 加 入 到 执行 栈 中 , 然后 依次 执行 ， 
如 果 有 异步 代码 ， 则 异步 事件 会 被 加 入 到 事件 队列 里 ， 直 到 执行 栈 中 的 所 有 方法 执行 完毕 后 ， 
再 从 事件 队列 里 面 依次 取出 异步 事件 , 放 到 执行 栈 中 执行 。 这 里 用 下 面 的 一 个 示例 来 理解 一 下 
事件 循环 原理 。 

【示例 4-1 事件 循环 】 


<!DOCTYPE html> 


<html lang="en”> 

<head> 
<meta charset="UTF-8"> 
<title> 事 件 循环 </title> 
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<script type="text/javascript"> 
function fnl() { 
console.1og ("1. 主线 程 执行 ") 
上 
function fn2() { 
setTimeout (function () { 
console.10g ("2. 先 放 入 事件 队列 ， 等 执行 栈 全 部 执行 完 后 ， 执 行 该 方法 ") 
}) 
} 
function fn3() { 
console.10g ("3. 主线 程 执行 ") 
} 
fn1(); 
fn2(); 
fn3(); 
</script> 
</head> 
<body> 
</body> 
</html> 


运行 结果 如 图 4-1 所 示 。 
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2 ， 先 的 入 事件 队列 ， 竺 执行 术 全 部 执行 完 后 执行 六 方法 事 位 播 环 ,html?_11t=nikpv.7n6oeglbfb5bps2m:12 
?| 


图 4-1 事件 循环 示例 执行 结果 


通过 运行 结果 可 以 看 到 ， 上 述 示 例 执 行 时 ， 先 执行 的 10 和 fm30 方 法 ， 最 后 执行 fn20) 
方法 。 原 因 是 这 样 的 ，fn10 和 fh30 方 法 为 同步 方法 ，fn20 为 异步 方法 ， 当 名 1() 方 法 在 执行 栈 
运行 完成 后 看 到 名 20 时 ， 识 别 出 这 是 一 个 异步 方法 后 将 其 放 入 事件 队列 中 等 待 ， 接 着 把 fn3() 
方法 放 入 执行 栈 中 运行 ， 等 fn30 方 法 运行 完 后 ， 发 现 执行 栈 已 经 清空 ， 再 去 事件 队列 中 寻找 
还 在 等 待 的 fn20 方 法 , 所 以 实际 的 运行 顺序 为 10 一 fh30 一 fm20. 事件 循环 原理 可 以 用 图 4-2 
表示 。 
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Memory Heap Call Stack 


Event Loop Callback Queue 


( ) 一 ence au aaa 


图 4-2 JavaScript 事件 循环 示意 图 
在 图 4-2 中 ，Web APIs 为 一 些 异 步 操 作 ， 当 JavaScript 识别 出 异步 方法 时 ,会 先 将 其 放 入 
Callback Queue (这 个 事件 队列 中 多 数 为 回调 函数 ， 所 以 也 称 为 回调 队列 ) 中 ，Call Stack 中 会 
先 执行 一 些 同步 操作 ， 等 到 Call Stack 中 的 所 有 方法 都 执行 完成 后 ，Callback Queue 中 等 待 的 
方法 才 会 放 入 执行 栈 中 执行 。Memory Heap 中 一 般 存 放 一 些 对 象 ， 担 当 一 个 内 存 区 域 的 角色 。 
JavaScript 事件 的 触发 大 概 分 为 三 个 阶段 : 
@ 事件 捕获 阶段 : 事件 从 文档 的 根 节点 出 发 ， 向 其 子 节点 延伸 ， 遇 到 相同 注册 事件 立即 
触发 ， 直 到 目标 节点 为 止 。 
@ 事件 处 理 阶段 : 事件 到 达 目 标 节点 ， 触 发 事件 。 
@ 事件 冒 泡 阶段 : 事件 离开 目标 节点 返回 到 文档 根 节点 ,并 在 路 途上 遇 到 相同 注册 事件 
再 次 触发 。 
下 面 通过 一 个 示例 来 理解 这 三 个 阶段 。 
【示例 4-2 ” JavaScript 事件 三 阶段 】 


<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>JavaScript 事件 三 阶段 </title> 
</head> 
<body> 
<div id="myDivFather"> 
<div id="myDivSon"> 


De 
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<div id="myDivGrandson"> 
孙 节 点 
</div> 
</div> 
</div> 
<script type="text/javascript"> 
var f = document .getElementById('myDivFather'); 
Var s = document .getElementById ("myDivSon"); 
var g = document .getElementById ("myDivGrandson") 
f.addEventListener ("click", function () { // 注 册 单 击 事件 
console.10g ("1. father 向 下 捕获 阶段 "); 
} ,true) 
s.addEventListener('click',function () { 
console.10g ("2. son 向 下 捕获 阶段 ") 
:true); 
g.addEventListener('click',function () { 
console.10g ("3. grandson 向 下 捕获 阶段 "); 
rEtrue)s 
f.addEventListener('click',function () { 
console.10g("4. father 向 上 冒 泡 阶 段 ") 
:false); 
s.addEventListener('click',function () { 
console.10g ("5. son 向 上 冒 泡 阶 段 ") 
false); 
g.addEventListener('click',function () { 
console.10g ("6. grandson 向 上 冒 泡 阶 段 "); 
:false); 


</script> 
</body> 
</html> 


addEventListener 方法 的 最 后 一 个 参数 可 以 指定 事件 为 捕获 还 是 冒 泡 ， 即 : 


obj .addEventListener ("click"，func，true);  // 捕获 方式 
obj .addEventListener ("click"，func，false);  // 冒 泡 方式 


第 一 个 参数 为 事件 类 型 ; 第 二 个 参数 为 回调 函数 , 执行 响应 事件 ; 第 三 个 参数 用 来 指明 是 
捕获 事件 还 是 冒 泡 事件 。 在 上 述 示例 中 ， 有 三 个 节点 ， 即 父 、 子 、 孙 节点 ， 都 注册 了 捕获 方式 
和 冒 泡 方 式 ， 当 单 击 孙 节 点 时 ,事件 先 到 父 节点 ,然后 到 子 节点 ， 最 后 到 孙 节 点 , 之 后 再 进行 


冒 泡 ， 返 


El 


到 子 节点 ， 再 返回 到 父 节点 。 单 击 孙 节点 时 ， 程 序 运行 效果 如 图 4-3 所 示 。 
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四 Toogle device toolbar Ss OM Fiter 


，father ”向 下 瑞 歼 阶段 JavaScript 事 件 三 阶段 ,html。5bd55h219nd68988:22 
。 son 向 下 捕获 阶段 
andson 向 下 捕获 阶段 
，9grandson ”向 上 冒 泡 阶 起 
， 5on ”向 上 置 泡 阶 自 
。father ”向 上 置 泡 阶 段 Javascript 事 件 三 阶段 .htmL_5bd55h21qnd66088:32 


4-3 事件 捕获 和 事件 冒 泡 运行 结果 
JavaScript 事件 传递 的 三 个 阶段 可 以 用 图 4-4 来 理解 。 


Element html 


捕获 阶段 NE 
[Element div | div 


图 4-4 ”JavaScript 事件 三 阶段 示意 图 


事件 处 理 阶段 ， 如 果 了 既 注册 了 捕获 事件 ， 也 注册 了 置 泡 事件 ， 这 个 时 候 事件 的 执行 是 按照 
事件 注册 的 先后 顺序 来 的 。 


4 .2 剖析 React 事件 系统 


React 事件 系统 在 原生 的 DOM 事件 体系 上 做 了 一 些 优化 ， 封 装 了 一 个 “合成 事件 ” 层 ， 
事件 处 理 程序 通过 合成 事件 进行 实例 传递 。 在 React 的 事件 系统 中 , 没有 把 所 有 事件 绑 定 到 对 
应 的 真实 DOM 上 , 而 是 使 用 委托 机 制 实现 了 一 个 统一 的 事件 监听 器 , 把 所 有 的 事件 绑 定 到 了 
最 外 层 document 上 ， 然 后 再 将 事件 进行 分 发 。 这 样 极 大 地 减少 了 内 存 开销 ， 使 运行 性 能 得 到 
极 大 提升 。 

在 合成 事件 中 ，React 提供 了 三 种 绑 定 事件 的 方法 : 组 件 上 绑 定 、 在 构造 函数 中 绑 定 、 箭 


4.2.1 组 件 上 绑 定 事 件 


在 组 件 上 直接 绑 定 事件 和 以 前 原生 在 HTML 中 的 DOM 元 素 绑 定 类 似 , 这 里 通过 示例 4-3 
进行 讲述 。 
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【示例 4-3 ”组 件 上 绑 定 事件 】 


<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title> 组 件 上 绑 定 事件 </title> 
<script crossorigin 
Src="https://unpkg.com/reactel6/umd/react.development.js"></script> 
<script crossorigin 
src="https://unpkg.com/react-dom@16/umd/react-dom.development .js"></script> 
<script 
src="https://unpkg.com/babel-standalone@6/babel .min.js"></script> 
</head> 
<body> 
<div id="root"></div> 
<script type="text/babel"> 
class HelloWorld extends React.Component { 
constructor(props) { 
super (props); 
} 
ShowName () { 
alert ("Hello React") 
} 
render () { 
Feturn ( 


<div> 
<button onClick={this.showName}> 单 击 事件 </button> 


// 组 件 上 绑 定 单 击 事件 


</div> 


} 
ReactDOM.render (<HelloWorld />, document .getElementById('root')); 


</script> 
</body> 
</html> 


对 于 React 中 组 件 绑 定 事件 和 HTML 中 的 实际 DOM 绑 定 事件 ,有 一 点 需要 注意 :在 HIML 
中 绑 定 ， 事 件 类 型 都 为 小 写 ， 并 且 函 数 要 放 到 引号 里 面 ， 例 如 : 


<button onclick="showName () "” > 单 击 事件 </button> 


示例 4-3 在 浏览 器 中 的 运行 效果 如 图 4-5 所 示 。 
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站 组 十 要件 x 
C | Q / 源 代码 / 敌 4 章 /示例 4-3/ 组 件 上 苦 定 事件 .html 图 | O 


| 单 击 事件 | 《| 来 自 此 网 页 


Hello React 


图 4-5 组 件 绑 定 单 击 事件 


4.2.2 在 构造 函数 中 绑 定 事件 
在 构造 函数 中 绑 定 方法 ， 需 要 用 this 关键 字 来 声明 定义 ， 如 示例 4-4 所 示 。 
【示例 4-4 ”构造 函数 中 绑 定 事件 】 


<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<tit1le> 在 构造 函数 中 绑 定 事件 </title> 
<script crossorigin src="https://unpkg.com/react@16/umd/ 
react .development .js"></script> 
<script crossorigin src="https://unpkg.com/react-dom@16/umd/ 
react-dom.development .js"></script> 
<script src="https://unpkg.com/babel-standalone@6/ 
babel.min.js"></script> 
</head> 
<body> 
<div id="root"></div> 
<script type="text/babel"> 
class HelloWorld extends React.Component { 
constructor(props) { 
super (props); 
this .showName = this.showName.bind(this); 
// 构 造 函 数 中 this 关键 字 声明 事件 
} 
ShowName (){ 
alert ("Hello React"); 
} 
render () { 
return( 


<div> 
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<button onClick={this.showName}> 单 击 事件 </button> 


</div> 


} 
ReactDOM.render (<HelloWorld />, document .getElementById("'root')); 


</script> 
</body> 
</html> 


this 指向 本 组 件 ， 在 构造 方法 中 声明 时 ， 一 定 要 用 bind() 来 绑 定 ， 传 入 this 参数 。 如 果 没 
有 绑 定 this， 在 调用 方法 时 会 报错 。Facebook 官方 推荐 使 用 该 方式 来 绑 定 方法 。 示例 4-4 的 运 
行 结果 和 示例 4-3 的 运行 结果 一 致 。 


4.2.3 ”箭头 函数 绑 定 事件 
ES6 新 增 的 “箭头 函数 ”可 以 用 来 绑 定 事件 ， 如 示例 4-5 所 示 。 
【示例 4-5 ”箭头 函数 绑 定 事件 】 


<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<tit1le> 箭 头 函数 绑 定 事件 </tit1le> 
<script crossorigin src="https://unpkg.com/react@16/umd/ 
react.development .js"></script> 
<script crossorigin src="https://unpkg.com/react-dom@16/umd/ 
react-dom.development .js"></script> 
<script src="https://unpkg.com/babel-standalone@6/ 
babel.min.js"></script> 
</head> 
<body> 
<div id="root"></div> 
<script type="text/babel"> 
class HelloWorld extends React.Component { 
constructor(props) { 
super (props); 
} 
ShowName (){ 
alert ("Hello React"); 
} 
render () { 


Feturn ( 
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<div> 
<button onClick={ ()=>this.showName () }> 单 击 事件 </button> 
// 箭 头 函 数 绑 定 事件 
</div> 


} 
1 
ReactDOM.render (<HelloWorld />, document .getElementById('root')); 
</script> 
</body> 
</html> 


读者 如 果 对 箭头 函数 陌生 ， 请 查看 本 书 第 1.6 节 中 有 关 ES6 中 的 箭头 函数 介绍 。 示 例 4-5 
的 运行 效果 和 示例 4-3 的 运行 效果 一 致 。 

React 的 合成 事件 基本 涵盖 了 平时 项 目 中 所 有 的 事件 类 型 ， 比 如 剪贴 板 事件 、 键 盘 事件 、 
鼠标 事件 、 表 单 事件 、 滚 轮 事件 等 。 详 细 内 容 可 查看 Facebook 官方 文档 ， 链 接地 址 为 
https://reactjs.org/docs/events.html。 


实战 : 实现 登录 界面 ( 事件 系统 演练 ) 


React 事件 在 实际 项 目 中 是 必 不 可 少 的， 本 节 笔 者 将 用 一 个 具体 实例 来 讲解 React 的 一 些 
事件 在 具体 应 用 中 如 何 使 用 。React 的 合成 事件 基本 能 够 满足 实际 项 目 中 的 所 有 操作 ， 在 4.2 
节 也 提 到 了 React 官方 文档 中 对 事件 有 详细 的 阐述 ， 读 者 可 以 去 React 官网 查阅 。 

一 些 功 能 性 网 站 都 会 有 一 个 登录 界面 , 输入 正确 的 用 户 名 和 密码 ,可 进入 网 站 主页 。 这 里 
就 以 登录 界面 为 例 ， 讲 解 React 事件 的 使 用 。 

本 例 登录 界面 的 展示 效果 如 图 4-6 所 示 。 


图 4-6 登录 界面 效果 
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整体 来 看 ， 要 实现 登录 界面 ， 需 要 定义 一 个 组 件 来 呈现 需要 展示 的 页 面 元 素 。 组 件 需要 定 
义 自己 的 样式 来 修饰 自身 组 件 。 另 外 就 是 事件 绑 定 ， 比 如 用 户 名 和 密码 不 能 超出 10 个 字符 ， 
如 果 不 符合 要 求 , 就 提示 用 户 重新 输入 ; 登录 按钮 需要 绑 定 单 击 事件 , 提醒 用 户 是 否 登 录 成 功 。 
这 里 先 展示 代码 ， 如 示例 4-6 所 示 。 


【示例 4-6 ”登录 界面 事件 讲解 】 


<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title> 登 录 界 面 </title> 
<script crossorigin src="https://unpkg.com/react@16/umd/ 
react .development .js"></script> 
<script crossorigin src="https://unpkg.com/react-dom@16/umd/ 


react-dom.development .js"></script> 
<script src="https://unpkg.com/babel-standalone@6/ 
babel.min.js"></script> 
</head> 
<body style="background-color: #cccccc"> 
<div id="root"></div> 
<script type="text/babel"> 
class Login extends React.Component{ 
constructor(props) { 
super (props); 
this.login = this.login.bind(this); 
this.check = this.check.bind(this); 
this.state={ // 默 认 用 户 名 和 密码 都 为 admin 
userName:"admin", 
passWord: "admin" 


login(){ 
if (this.refs.user.value===this.state.userName&&this.refs.pwd. 
value===this.state.passWord) // 判 断 用 户 输入 的 用 户 名 和 密码 是 否 为 admin 
alert (" 登 录 成 功 ") ; 
else 
alert ("登录 失败 ") ; 
} 
check(){ 
if (this.refs.user.value.length>10) // 检 测 用 户 名 是 否 超 过 10 个 字符 
alert ("超出 10 个 字符 ， 请 重新 输入 ") ; 
} 
render () { // 首 先 定义 组 件 样式 
var loginstyle={ 
width: 400, 
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height: 250, 
background: ™#FFF", 
margin:"200px auto", 
position: "relative" 
] 7 
Var hstyle={ 
position:"absolute", 
left:95, 
top:-40， 
padding: 0, 
margin: 50, 
}; 
Var pstyle={ 
textAlign: "center" 
}; 
Var userstyle={ 
width: 200, 
height: 30, 
border:"solid #ccc lpx", 
borderRadius: 3, 
paddingLeft: 32, 
marginTop: 50, 


}; 
Var pwdSstyle={ 
width: 200, 
height: 30, 
border:"solid #ccc lpx", 
borderRadius: 3, 
paddingLeft: 32, 
marginTop: 5, 
}; 
var buttonstyle={ 
width: 232, 
height: 30, 
background: "#E9E9E9", 
border:"solid #ccc lpx", 
borderRadius: 3, 
textAlign:"center" 
] 7 
Feturn ( 
<div style={loginstyle}> 
<hl style={hStyle}> 登 录 界 面 </h1> 
<div> 
<p style={pStyle}><input type="text" style={userSstyle} 
placeholder=" 用 户 名 " ref="user" onChange={this.check}/></p> 
<p style={pStyle}><input type="password" style={pwdSstyle} 
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Placeholder=" 密 码 ” ref="pwd"/></p> 


<p style={pStyle}j><button style={buttonstyle} 


onClick={this.1ogin}> 登 录 </button></p> 
</div> 
</div> 


} 

ReactDOM.render (<Login />,document .getElementById ("root")); 
</script> 
</body> 
</html> 


首先 在 构造 方法 中 声明 state, 默认 的 用 户 名 和 密码 为 admin， 当 用 户 输入 的 用 


户 名 和 密码 


都 为 admin 时 ， 方 可 登录 成 功 。 另 外 ， 需 要 在 构造 方法 中 声明 事件 ， 这 样 的 性 能 为 最 高 效 。 绑 


定 事件 的 3 种 方法 在 4.2 节 中 已 讲述 ， 读 者 可 返回 去 查看 。React 中 的 组 件 样式 ， 


可 定义 成 变 


量 ， 可 直接 在 组 件 中 引用 。 在 React 中 ， 可 通过 ref 来 获取 input 值 。 具 体 效 果 可 在 浏览 器 中 碍 


看 。 


二 在 JSX 中 ,样式 中 如 果 有 “-" 分 割 符 ， 请 写 为 小 驼峰 法 ， 比 如 text-align 需要 写 为 textAlign。 | 
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自从 React 在 2013 年 5 月 开源 到 现在 ， 其 独特 的 设计 思想 、 高 性 能 的 组 织 架 构 ， 一 直 吸 
引 着 千 千 万 万 的 前 端 开发 者 。 在 实际 的 前 端 开 发 项 目 中 , 经 常 通过 更 新 后 台数 据 来 重新 泻 染 前 
端 UI。 泻 染 UI 就 离 不 开 DOM 操作 , 然而 经 常 性 地 操作 DOM 难免 会 导致 项 目 性 能 变 差 。 React 
在 这 方面 做 了 优化 工作 ， 提 供 了 虚拟 DOM。 要 更 新 数据 就 先 更 新 虚拟 DOM (虚拟 DOM 是 
内 存 数据 ， 所 以 操作 速度 极 快 ) ， 再 进行 dom-diff 操作 ， 把 最 后 真正 发 生变 化 的 数据 泻 染 到 
真实 DOM 中 ， 整 个 过 程 大 大 减少 了 真实 DOM 操作 ， 同 时 也 大 大 提高 了 页 面 性 能 。 本 章 将 以 
React 中 几 个 重要 的 知识 点 来 前 述 React 的 工作 原理 。 


JSX 


虚拟 DOM 是 React 中 的 一 个 核心 技术 。 在 JSX 之 前 ，React 也 提供 了 创建 虚拟 DOM 的 
方法 ， 例 如 要 实现 一 个 列表 功能 ， 可 用 JavaScript 来 实现 ， 如 示例 5-1 所 示 。 


【示例 5-1 JavaScript 创建 虚拟 DOM】 


<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>JavaScript 创建 虚拟 DOM</title> 
<script crossorigin 
src="https://unpkg.com/react@16/umd/react .development .js"></script> 
<script crossorigin 
src="https://unpkg.com/react-dom@16/umd/react-dom.development .js"></script> 
<script 
src="https://unpkg.com/babel-standalone@6/babel .min.js"></script> 
</head> 
<body> 
<div id="root"></div> 
<script type="text/babel"> 
class List extends React.Component{ 


render(){ 
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Var childl = React.createElement ('l1i', null, 'React'); 
Var child2 = React.createElement ('1i', null, ‘'Vue'); 
Var child3 = React.createElement ('1i', null, 'Angular'); 
return( 
React .createElement ('ul', { className: 'my-list' }, childl, 
child2, child3) 
) 


} 

ReactDOM. render (<List/>,document .getElementById ("root")); 
</script> 
</body> 
</html> 


通过 这 种 方式 来 创建 虚拟 DOM， 整 体 的 可 读 性 不 是 很 好 ， 如 果 DOM 比较 多 ， 这 种 方式 
会 显得 异常 凌乱 。 为 了 让 代码 的 可 读 性 更 好 ，FaceBook 创造 出 一 套 完 善 的 解决 方案 ， 那 就 是 
JSX。 

JSX 是 React 的 重要 组 成 部 分 ， 可 以 使 用 XML 的 方式 来 声明 页 面 结构 ， 是 一 种 高 效 、 优 
雅 的 语法 糖 。 上 述 示例 如 果 利 用 JSX 来 实现 ， 可 以 像 示例 5-2 这 样 写 。 


【示例 5-2 JSX 创建 虚拟 DOM1】 


<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>JSX 创建 虚拟 DOM</title> 
<script crossorigin src="https://unpkg.com/react@16/umd/ 
react .development .js"></script> 
<script crossorigin src="https://unpkg.com/react-dom@16/umd/ 
react-dom.development .js"></script> 
<script src="https://unpkg.com/babel-standalone@6/ 
babel.min.js"></script> 
</head> 
<body> 
<div id="root"></div> 
<script type="text/babel"> 
class List extends React.Component{ 
render () { 
return( 
<ul> 
<li>React</1i> 
<li>Vue</1i> 
<li>Angular</1i> 
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</ul> 


ReactDOM. render (<List/>,document .getElementById ("root")); 
</script> 
</body> 
</html> 


虚拟 DOM 元 素 可 以 直接 用 XML 方式 来 定义 , 这样 比较 符合 以 前 的 HTML 中 的 DOM 书 
写 习惯 ， 并 且 可 读 性 较 好 。 


卫生 | 用 JSX 书写 代码 时 ,一 定 要 记 住 <script> 标 签 中 的 type 为 “text/babel”， 因 为 JSX 是 浏览 
e 器 不 识别 的 , 需要 利用 babel 来 对 JSX 进行 编译 , 转 为 浏览 器 能 够 理解 的 JavaScript 代码 。 


5.1.1 JSX 语法 

JSX 的 语法 和 XML 类似 , 可 以 定义 自身 属性 以 及 子 元 素 。 另外 ,JSX 可 以 添加 JavaScript 
表达 式 ， 用 旨 括 起 来 。 例 如 ， 在 示例 5-2 中 ， 可 以 把 子 元 素 定义 为 一 个 数组 ， 直 接 用 表达 式 来 
引用 ， 代 码 如 下 : 


<script type="text/babel"> 


class List extends React.Component{ 
render(){ 
var Lis | 
<1i key="1i01">React</1i>， //<1i> 标 签 需要 增加 key 属性 ， 不 然 会 报 异 常 
<1i key="1i02">Vue</1i>, 
<1i key="1i03">Angular</1i> 
] 
Feturn ( 
<ul> 
让 
</ul> 


} 
} 
ReactDOM.render (<List/>,document .getElementById ("root")); 
</script> 


当然 , JSX 中 的 个 还 可 以 为 一 些 计算 的 求 值 表达 式 , 但 是 不 能 用 让 else 这 样 的 条 件 判断 语 
句 ， 如 果 想 实现 条 件 判 断 功能 ， 可 以 使 用 三 目 运 算 表达 式 ， 如 示例 5-3 所 示 。 


64 


第 5 章 深入 React 原理 


【示例 5-3 JSX 中 的 条 件 表达 式 】 


<!DOCTYPE html> 


<html lang="en"> 
<head> 
<meta charset="UTF- 8"> 
<title>JSX 条 件 表达 式 </title> 
<script crossorigin src="https://unpkg.com/react@16/umd/ 
react .development .js"></script> 
<script crossorigin src="https://unpkg.com/react-dom@16/umd/ 
react-dom.development .js"></script> 
<script src="https://unpkg.com/babel-standalone@6/ 
babel.min.js"></script> 
</head> 
<body> 
<div id="root"></div> 
<script type="text/babel"> 
class Hello extends React.Component{ 
render(){ 
Feturn ( 
<div>Hello {this.props.name?this.props.name:"World"}</div> 
// 三 目 运算 ， 如 果 name 属性 不 为 空 ， 则 显示 name 属性 值 ， 否 则 显示 World 


} 

ReactDOM.render (<Hello name="React"/>,document .getElementById ("root")); 
</script> 
</body> 
</html> 


5.1.2 ”JSX 使 用 样式 


在 实际 项 目 中 ， 有 些 组 件 的 样式 需要 独立 ， 那 CSS 样式 在 组 件 中 该 如 何 书写 呢 ? 按照 以 
前 传统 的 写法 ， 可 以 把 样式 写 到 标签 中 的 style 属性 中 ， 比 如 : 


<button style="background-color: red"> 按 钮 </button> 
在 JSX 中 ， 样 式 需要 用 一 个 对 象 来 保存 ， 然 后 用 个 进行 引用 ， 如 示例 5-4 所 示 。 
【示例 5-4 JSX 样式 】 


<!DOCTYPE html> 


<html lang="en"> 

<head> 
<meta charset="UTF-8"> 
<title>JSX 条 件 表达 式 </title> 
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<script crossorigin src="https://unpkg.com/react@16/umd/ 
react .development .js"></script> 
<script crossorigin src="https://unpkg.com/react-dom@16/umd/ 
react-dom.development .js"></script> 
<script src="https://unpkg.com/babel-standalone@6/ 
babel .min.js"></script> 
</head> 
<body> 
<div id="root"></div> 
<script type="text/babel"> 
class Hello extends React.Component{ 
render() { 
Var bgColor = { 
backgroundColor: "red" 
} 
return ( 
<button style={bgColor}> 按 钮 </button> 


} 

ReactDOM.render (<Hello name="React"/>,document .getElementById ("root")); 
<WSCEURE> 
</body> 
</html> 


当然 ， 也 可 以 直接 在 标签 中 定义 样式 ， 代 码 如 下 : 


render() { 
Feturn ( 
<button style={ {backgroundColor:"red"}}> 按 钮 </button> 


} 
第 一 个 人 为 JSX 语法 ， 第 二 个 {} 表 示 对 象 。 


dom-diff 


从 广义 上 讲 ，Web 界面 的 变化 ,实质 上 是 数据 的 变更 。 数据 可 以 为 DOM 节点 、 组 件 属性 
等 ， 数 据 操作 基本 分 为 增加 、 删 除 、 修 改 。 在 React 中 ，UI 进行 更 新 时 ， 首 先 需 要 比 对 当前 
数据 和 前 一 状态 的 数据 ， 哪 些 数据 发 生 了 变化 ， 就 把 发 生变 化 的 数据 演 染 在 UI 上 。 

Web 界面 实质 上 是 构建 的 一 棵 DOM 树 , 当 菜 一 节点 发 生变 化 时 , React 会 对 当前 的 DOM 


66 


第 5 章 深入 React 原理 


树 和 前 一 状态 的 DOM 树 进行 比较 ， 这 个 比较 的 算法 就 是 本 节 讲 述 的 dom-diff 算法 。 

其 实 dom-diff 算法 在 React 之 前 就 已 经 有 了 , 称 为 标准 dom-diff 算法 。 标准 dom-diff 算法 
是 针对 任意 两 棵 树 找 最 小 变化 步骤 ， 这样 的 算法 时 间 复 杂 度 为 O003)， 目 前 市 场 上 一 些 Web 前 
端 项 目 非常 复杂 ，DOM 节点 可 能 有 成 千 上 万 个 ， 显 然 这 种 方式 的 di 任 算法 满足 不 了 用 户 需 要 
的 性 能 。 

React 在 标准 dom-diff 算法 上 进行 了 优化 ， 让 时 间 复 杂 度 从 O(m) 减 少 到 了 O(n)， 这 样 UI 
的 演 染 性 能 就 得 到 了 极 大 提升 。 在 理解 React 的 diff 算法 时 ， 读 者 要 先 了 解 一 下 React 的 diff 
算法 是 有 两 个 假设 的 ， 官 方 的 说 法 是 : 


1. Two elements of different types will produce different trees。 


2. The developer can hint at which child elements may be stable across different renders with a 
key prop。 
关于 上 述 两 条 假设 ， 在 这 里 用 通俗 的 语言 再 解释 一 下 : 
@ React 认为 相同 类 型 的 两 个 组 件 有 类 似 的 DOM 树 结构 ， 在 这 种 情况 下 会 采用 diff 算 
法 比较 两 个 DOM 树 的 差异 。 如 果 两 个 组 件 的 类 型 不 同 ， 那 么 React 会 认为 这 两 个 
DOM 树 结构 不 同 ， 将 之 前 的 组 件 直接 删除 ， 然 后 创建 新 组 件 。 
@ 同一 层次 的 一 组 节点 ， 可 以 通过 唯一 的 key 值 来 进行 区 分 。 
基于 上 述 两 条 假设 , React 的 diff 算法 就 可 以 将 算法 复杂 度 减 少 到 O(n)。React 对 DOM 树 
进行 了 分 层 ， 只 会 对 同一 层 的 节点 进行 数据 比较 。 另 外 ，React 认为 在 Web UI 中 DOM 节点 
的 跨 层级 移动 操作 比较 少 ， 甚 至 可 以 忽略 不 计 。React 的 同 层级 比较 如 图 5-1 所 示 。 


Before After 


图 5-1 React DOM 树 同 层 比较 示意 图 
React 只 会 比较 同一 父 节点 下 的 子 节点 ， 即 图 5-1 中 相同 颜色 的 节点 。 如 果 节 点 类 型 发 生 


变化 ， 那 么 React 会 将 其 删除 ， 然 后 新 建 节点 到 新 的 DOM 树 上 。 如 果 节 点 类 型 相同 、 属 性 不 
同 ， 那 么 React 会 进行 替换 操作 。 


读者 在 进行 实际 开发 时 ,如 果 直 到 同一 层级 的 子 节点 进行 操作 时 , 需要 加 上 key 属性 来 进 
行 唯一 区 别 ， 否 则 React 会 进行 告警 。key 的 唯一 属性 是 避免 删除 、 创 建 等 重复 操作 ， 减 
少 性 能 消耗 。 


CA 


er 
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这 里 用 一 个 具体 示例 来 解释 一 下 React 的 dom-di 作 算法。 假如 现在 有 一 棵 DOM 树 ， 节 点 
变化 过 程 如 图 5-2 所 示 。 


图 5-2 DOM 树 节点 变化 过 程 


5-2 左 侧 为 变化 前 的 DOM 树 结构 ， 右 侧 为 变化 后 的 DOM 树 结构 ， 整 个 变化 过 程 为 ; 
C 节点 从 A 节点 转移 到 了 D 节点 上 。React 对 整 棵 DOM 树 的 操作 步骤 为 ; 


(1) 删除 C 节点 。 
(2) 创建 C 节点 。 
(3) 更 新 B 节点 。 
(4) 更 新 A 节点 。 
(5) 泻 染 C 节点 。 
(6) 更 新 D 节点 。 
(7) 更 新 及 节点。 


5 © 3 setState 


React 组 件 可 以 理解 为 一 个 状态 机 。 组件 的 更 新 其 实 就 是 内 部 state 值 的 更 新 , state 属性 记 
录 着 组 件 的 状态 ， 在 实际 项 目 中 会 经 常 性 地 对 组 件 进行 重新 渲染 ， 这 就 离 不 开 重新 设置 state 
属性 。 本 节 将 讲述 React 修改 state 的 方法 setState。 

下 面 先 通过 一 个 示例 来 了 解 一 下 setState 的 用 法 。 新 浪 微 博 有 一 个 功能 ， 可 以 给 某 一 条 微 
博 进行 点 况 ， 也 可 以 取消 点 赞 ， 本 示例 简单 模拟 点 赞 功能 。 


【示例 5-5 ”setState 用 法 】 


<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>setstate 用 法 </title> 
<script crossorigin src="https://unpkg.com/react@16/umd/ 
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react .development .js"></script> 
<script crossorigin src="https://unpkg.com/react-dom@16/umd/ 
react-dom.development .js"></script> 
<script src="https://unpkg.com/babel-standalone@6/ 
babel.min.js"></script> 
</head> 
<body> 
<div id="root"></div> 
<script type="text/babel"> 
class Hello extends React.Component{ 
constructor(){ 
super (); 
this.state={ 
isLiked:true 
} 
this.changeState = this.changestate.bind (this); 
} 
changestate(){ 
this.setState({ // 修 改 state 值 
isLiked :!this.state.isLiked 
}) 
} 
render() { 
returnl( 
<button onClick={this.changestate}>{this.state.isLiked?" 点 
先 ":" 取 消 "}</button> 
) 


} 
ReactDOM.render (<Hello name="React"/>,document .getElementById ("root")); 


</script> 
</body> 
</html> 


组 件 状态 默认 值 在 构造 函数 中 声明 ， 通 过 单 击 按钮 触发 事件 ， 改 变 state 值 。 在 上 述 示 例 
中 ，state 中 的 isLiked 属性 默认 值 为 tue， 页 面 初始 化 时 按钮 上 的 内 容 为 “点 赞 ”， 用 户 单 击 
按钮 ， 调 用 changeState() 方 法 中 的 setState 来 对 状态 值 进行 修改 ， 此 时 React 重新 调用 render() 
方法 对 组 件 进行 泻 染 。 

setState() 方 法 可 以 传 入 两 个 参数 ， 格 式 如 下 : 


setstate (updater, [callback]) 
//updater 为 新 的 state 或 props， 既 可 以 为 一 个 对 象 ， 也 可 以 是 一 个 函数 ，[callback] 为 回调 函数 


setState() 方 法 为 异步 操作 ， 实 质 上 是 通过 一 个 队列 机 制 来 更 新 state。 在 示例 5-5 中 ， 在 执 
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行 changeState0 方 法 中 的 this.setState 时 ，React 先 把 新 state 值 放 到 了 一 个 状态 队列 中 , 并 没有 
及 时 更 新 state 值 。 在 示例 5-5 中 加 入 一 些 log 日 志 ， 可 以 看 到 这 一 现象 ， 代 码 如 下 : 


<script type="text/babel"> 
class Hello extends React.Component{ 
constructor (){ 
super (); 
this.state={ 
isLiked:true 
} 
this.changeState = this.changestate.bind(this); 
} 
changestate(){ 
console.log(this.state.isLiked) // 输 出 当前 state 值 
this .setState({ 
isLiked :!this.state.isLiked 
和 
console.log(this.state.isLiked) //setState 后 ， 输 出 当前 state 值 
} 
render() { 
Feturn ( 
<button onClick={this.changestate}>{this.state.isLiked?" 点 
赞 ":" 取 消 "}</button> 
上 


} 
ReactDOM. render (<Hello name="React"/>,document .getElementById ("root")); 
</script> 


在 changeState() 方 法 中 添加 两 行 log 日 志 ， 分别 放 在 setState() 方 法 前 后 。 这 里 先 假设 
setState() 为 同步 更 新 ， 在 构造 方法 中 初始 化 state 时 ，isLiked 值 为 rue， 页 面 刷新 后 ， 按 钮 上 
的 默认 值 为 “点 赞 ”。 当 单 击 按钮 调用 changeState() 方 法 时 ， 第 一 个 log 日 志 输 出 的 
this.state.isLiked 值 为 tue， 这 个 毫 无 疑问 ,然后 执行 this.setState() 方 法 ， 对 state 属性 进行 更 新 
操作 ， 再 输出 第 二 个 log 日 志 ， 如 果 setState() 方 法 为 同步 更 新 ， 那 么 第 二 个 log 日 志 输 出 应 该 
为 false， 在 这 里 看 一 下 运行 结果 ， 如 图 5-3 所 示 。 


日 © top v | Fiter Default levels Y Group similar 


A pYou are using the in-browser Babel transformer. Be sure to precompile your babel.min,js:24 
scripts for production ~ https://babeljs.io/docs/setup/ 


true Inline Babel script:11 
Inline Babel script:15 
> 


图 5-3 ”setState0 方 法 异步 测试 
可 以 看 到 第 二 个 log 日 志 输 出 的 this.state.isLiked 值 为 true, 仍然 是 旧 状 态 值 。 这 种 反 证 法 
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React 中 的 setState 异步 原理 是 什么 呢 ? 笔者 这 里 再 举 一 个 示例 
的 操作 原理 进行 进一步 讲解 。 
【示例 5-6 ”setState 原理 】 


<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>setstate 原理 </title> 
<script crossorigin src="https://unpkg.com/react@1 


react .development .js"></script> 
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( 见 示 例 5-6) ， 对 setState 


6/umd/ 


<script crossorigin src="https://unpkg.com/react-dom@16/umd/ 


react-dom.development .js"></script> 


<script src="https://unpkg.com/babel-standalone@6/babel .min.js"> 


</script> 
</head> 
<body> 
<div id="root"></div> 
<script type="text/babel"> 
class HelloWorld extends React.Component { 
constructor(props) { 
super (props); 
this.state = { 
count:0 
2 
this.showState = this.showstate.bind (this); 
} 
componentDidMount () { 
this .setState({ 
count :this .state.count+1 
]) 
this .setState({ 
count:this.state.count+1 
DD); 
this.setstatel({ 
count:this.state.count+1 


]) 


console.1og ("setstate 后 立即 显示 state 值 为 : "+this.state.count); 


showstate(){ 


console.1o0g ("showState 方法 中 的 state 值 为 : "+this.state.count); 
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render () { 
Feturn ( 


<button onClick={this.showState}> 显 示 当 前 state 值 </button> 


} 

ReactDOM.render (<HelloWorld />, document .getElementById('root')); 
</script> 
</body> 
</html> 


上 述 示例 ， 在 组 件 挂 载 完成 后 ， 进 行 三 次 setState.count+1 操作 ， 立 即 显示 当前 state.count 
值 ， 再 通过 单 击 事件 来 显示 当前 state.count 值 ， 程 序 运行 效果 如 图 5-4 所 示 。 


加 © | top v | Fner Detautt levels y 加 Group simllar hidden | 窜 


A »You are using the in-browser Babel transformer, Be sure to preconpile your scripts for production ~ h babel,min,js:24 
ttps://babelis.io/docs/setup/ 
setState 后 立即 显示 state 值 为 : 9 Inline Babel script:26 
showState 方 法 中 的 state 值 为 : 1 Inline Babel script:23 
> 


图 5-4 ”state 异步 执行 效果 


从 图 5-4 显示 的 结果 可 以 看 出 ， 虽 然 在 componentDidMount() 方 法 中 执行 了 三 次 setState， 
但 是 最 后 就 执行 了 一 次 ， 并 且 没 有 立即 执行 。 原 因 是 React 先 把 新 的 state 值 放 到 了 状态 队列 
里 , 最 后 对 三 次 setState 进行 了 批量 处 理 ， 批 处 理 过 程 中 进行 了 合并 ,所 以 结果 就 是 对 setState 
只 执行 了 一 次 ， 这 样 做 的 好 处 是 可 以 避免 一 些 重复 泻 染 ， 这 也 是 React 能 够 提升 性 能 的 一 个 原 
因 。 对 于 setState，React 官方 是 这 么 说 的 : 


Think of setState() as a request rather than an immediate command to update the component. For 
better perceived performance, React may delay it, and then update several components in a single pass. 


React does not guarantee that the state changes are applied immediately. 


大 概 可 以 理解 为 : setState0 可 以 理解 为 一 个 重新 泻 染 的 请 求 , 而 不 是 立即 更 新 的 一 个 命令 ， 
为 了 有 更 好 的 性 能 ，React 可 能 会 推迟 执行 ， 然 后 会 批量 进行 处 理 。React 不 会 保证 在 setState 
操作 后 立即 拿 到 最 新 的 state 值 。 

如 果 想 在 setState 后 立即 得 到 最 新 的 state 值 ， 可 以 通过 函数 来 实现 ， 如 示例 5-7 所 示 。 


【示例 5-7 setState 传 入 函数 】 


<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>setstate 传 入 函数 </title> 
<script crossorigin src="https://unpkg.com/react@16/umd/ 


react .development .js"></script> 
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<script crossorigin src="https://unpkg.com/react-dom@16/umd/ 
react-dom.development .js"></script> 
<script src="https://unpkg.com/babel-standalone@6/babel .min.js"> 
</script> 
</head> 
<body> 
<div id="root"></div> 
<script type="text/babel"> 
class HelloWorld extends React.Component { 
constructor(props) { 
super (props); 
this.state = { 
count:0 
}; 
this.showState = this.showstate.bind (this); 
} 
componentDidMount () { 
this .setState( 
function(state) { 
console.10g ("第 一 次 setstate 后 的 count 值 : "+state.count) ; 
return 1{ 
count : state.count + 1 


) 
this .setState( 
function(state) { 
console.10g ("第 二 次 setstate 后 的 count 值 : "+state.count) ; 
return { 
count: state.count + 1 


); 
this .setState( 
function(state) { 
console.10g ("第 三 次 setstate 后 的 count 值 : "+state.count); 
return { 


count: state.count + 1 


showState(){ 
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console.1log ("showState 方法 中 的 state 值 为 : "+this.state.count); 
} 
render () { 
return( 
<button onClick={this.showSstate}> 显 示 当 前 state 值 </button> 


} 


} 

ReactDOM. render (<HelloWorld />, document .getElementById('root')); 
</script> 
</body> 
</html> 


如 果 setState 的 第 一 参数 为 函数 时 , 那么 该 函数 会 接收 到 组 件 前 一 时 刻 的 state 值 , 并 将 其 
作为 入 参 ， 计 算 返 回 的 是 最 新 的 state 值 。setState 第 一 个 参数 为 函数 时 ，React 的 处 理 方式 和 
入 参 为 对 象 的 处 理 方 式 不 同 ，React 会 将 函数 放 到 一 个 任务 队列 中 依次 执行 ， 所 以 每 个 函数 执 
行 后 返回 的 state 值 都 是 当前 最 新 的 。 示 例 5-7 的 运行 结果 如 图 5-5 所 示 。 


etState 后 的 count 值 : @ 


第 二 次 set5tate 后 的 count 值 : 1 
第 三次 setState 后 的 count 值 : 2 
showState 方 法 中 的 state 值 为: 3 


图 5-5 setState 传 入 函数 state 可 同步 


总 读者 在 实际 项 目 中 不 要 用 this.state 来 修改 state 值 ， 因 为 获取 到 的 this.state 有 可 能 不 是 最 
e 新 的 ， 更 新 组 件 state 时 要 用 setState() 方 法 。 
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组 件 是 React 这 个 前 端 框架 的 一 个 灵魂 ， 比 如 盖 一 座 房 子 需 要 门 、 窗 户 、 房 梁 等 ， 每 一 个 
小 的 部 分 都 是 构成 房子 的 重要 因素 。 组 件 就 是 React 的 每 一 个 小 组 成 ， 一 个 优秀 的 React 项 目 
必然 是 由 很 多 优秀 的 组 件 来 构建 的 。 本 章 将 带领 读者 进入 React 世界 里 的 组 件 部 分 。 


React 组 件 写 法 


在 更 好 地 使 用 React 组 件 之 前 ， 读 者 应 该 掌握 React 组 件 的 写法 。React 组 件 写 法 有 三 种 
方式 〈React createClass 写法 、React、Component 写法 和 无 状态 函数 写法 ) ， 选 择 一 种 更 适合 
的 编码 方式 , 在 一 定 程度 上 会 使 得 项 目 开发 更 加 高 效 。 比 如 从 一 个 出 发 点 到 一 个 目的 地 ,两 点 
之 间 有 很 多 条 路 ， 选 择 一 条 更 短 的 路 ， 会 减少 路 途上 的 行走 时 间 。 


6.1.1 React.createClass 写法 

这 种 写法 是 ES5 写法 ， 中 规 中 和 矩 ， 比 较 符 合 以 前 的 JavaScript 定义 类 的 编码 习惯 ， 这 种 组 
件 写法 也 是 最 早 React 官方 推荐 的 定义 组 件 方法 (后 来 ES6 的 盛行 ,目前 最 推崇 的 方法 是 ES6 
的 组 件 写法 ， 后 面 讲述 ) 。 这 里 以 HelloWorld 组 件 的 简单 操作 来 介绍 这 种 组 件 写法 ， 如 示例 
6-1 所 示 。 


【示例 6-1 组 件 写法 -React.createClass】 


<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UrTE-8"> 
<title> 组 件 写法 --React .createClass</title> 
<script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"> 
</script> // 这 里 用 的 React 的 15 版 本 
<script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"> 
</script> 
<script src="https://cdn.bootcss.com/babel-standalone/6.22.1/ 
babel.min.js"></script> 
</head> 
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<body> 
<div id="root"></div> 
<script type="text/babel"> 
Var HelloWorld = React.createClass({ 
getInitialstate: function(){ // 获 取 state 的 初始 值 
return{ 
message:" 单 击 显示 信息 " 
}; 
}, 
componentWillMount: function(){ 
console.1og("1. 挂 载 前 执行 ") 
}, 
componentDidMount: function(){ 
console.1og("2. 挂 载 后 执行 ") 
}, 
showMessage:function(){ 
alert ("Hello React"); 
}, 
render:function() { 
return ( 
<button onClick={this.showMessage}>{this.state.message}</button> 


}); 

ReactDOM. render (<HelloWorld />,document .getElementById("root")); 
</script> 
</body> 
</html> 


注意 ， 在 该 示例 中 ， 笔 者 引用 的 React 版 本 为 15， 本 书 主要 讲解 的 React 版 本 为 16。 那 
为 什么 这 个 示例 中 用 的 React 版 本 会 是 以 前 的 版 本 呢 ? 原因 是 最 新 的 React 版 本 16 已 经 不 支 
持 这 种 React 组 件 写法 了 ， 所 以 读者 对 这 种 组 件 写法 了 解 一 下 即 可 ， 因 为 目前 网 上 一 些 教程 还 
是 以 这 种 写法 为 例 ， 能 够 理解 就 行 。 目 前 组 件 的 主流 写法 是 下 面 讲述 的 ES6 的 写法 。 


6.1.2 ”React.Component 写法 


这 种 是 ES6 写法 ， 是 目前 React 官方 主推 写法 ， 并 且 React 16 版 本 已 经 废弃 了 ES5 的 
React.createClass 写法 。 如 果 读 者 有 过 Java 编程 经 验 , 那 这 种 写法 学 起 来 会 更 加 轻松 , 因为 ES6 
引入 class 之 后 , 基本 和 Java 的 写法 类 似 。 这 里 还 是 以 HelloWorld 组 件 为 例 讲述 该 写法 ,如 示 
例 6-2 所 示 。 

【示例 6-2 ”组件 写 法 -React.Component】 


<!DOCTYPE html> 
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<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title> 组 件 写法 --React .Component</title> 
<script crossorigin src="https://unpkg.com/react@16/umd/ 
react .development .js"></script> 
<script crossorigin src="https://unpkg.com/react-dom@16/umd/ 
react-dom.development .js"></script> 
<script src="https://unpkg.com/babel-standalone@6/ 
babel.min.js"></script> 
</head> 
<body> 
<div id="root"></div> 
<script type="text/babel"> 
class HelloWorld extends React.Component{ 
constructor(){ 
super () 
this.state = { 
message:" 单 击 显 示 信息 " 


componentWwillMount () { 
console.1og("1. 挂 载 前 执行 ") 


componentDidMount () { 
console.1og("2. 挂 载 后 执行 ") 


showMessage (){ 
alert ("Hello React"); 


render(){ 
return ( 
<button onClick={this.showMessage}>{this.state.message}</button> 


} 

ReactDOM.render (<HelloWorld />,document .getElementById ("root")); 
</script> 
</body> 
</html> 


ES6 的 写法 ， 整 体 看 起 来 优雅 大 气 ， 并 且 很 符合 类 的 写法 。 另 外 ，React.Component 的 组 
件 定义 在 性 能 上 也 优 于 React.createClass 的 组 件 定义 ， 随 着 React 的 发 展 ，ES6 的 写法 会 是 一 


Tf 
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个 主流 ， 建 议 读者 在 平时 项 目 开发 中 使 用 ES6 的 组 件 写法 。 


6.1.3 无 状态 函数 写 ; 

所 谓 无 状态 组 件 ， 就 是 没有 state 属性 的 参与 ， 数 据 只 接收 props 属性 值 。 为 什么 要 使 用 
无 状态 的 组 件 定义 呢 ? 随 着 Web 页 面 的 需求 不 断 增加 ， 某 些 项 目的 功能 可 能 极其 复杂 ， 为 了 
代码 减少 耦合 度 ， 并且 让 每 个 组 件 各 尽 其 职 ， 需 要 某 类 组 件 只 负责 呈现 数据 ,不 需要 更 多 的 逻 
辑 操作 ， 这 个 时 候 无 状态 组 件 就 诞生 了 。 具 体 用 法 如 示例 6-3 所 示 。 


【示例 6-3 组件 写法 -无 状态 函数 】 


<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title> 组 件 写法 -- 无 状态 函数 </title> 


<script crossorigin src="https://unpkg.com/react@16/umd/ 


react .development .js"></script> 
<script crossorigin src="https://unpkg.com/react-dom@16/umd/ 
react-dom.development .js"></script> 
<script src="https://unpkg.com/babel-standalone@6/babel .min.js"> 
</script> 
</head> 
<body> 
<div id="root"></div> 
<script type="text/babel"> 
const HelloWorld = (props)=>{ 
return( 
<div> 
hello {props.name} 
</div> 


由 
ReactDOM.render (<HelloWorld name="react"/>, 
document .getElementById ("root")); 
</script> 
</body> 
</html> 


箭头 函数 是 ES6 的 新 标准 , 已 在 1.6 节 中 讲述 , 如 果 读 者 对 箭头 函数 陌生 , 可 以 返回 查看 。 
除了 传递 props， 还 可 以 增加 参数 ， 例 如 可 以 这 么 写 : 


const HelloWorld = ({onClick, text,.. -Props})=>{ 


Feturn ( 
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<div> 
hello {props.name} 
</div> 


.2 React 组 件 分 类 


在 一 定 程度 上 ,React 的 组 件 化 对 传统 的 大 型 Web 项 目 进行 了 架构 优化 , 各 个 组 件 实现 特 
定 功能 ， 并 且 组 件 之 间 耦 合 度 非 常 低 。 为 了 能 够 使 组 件 进一步 细 化 功能 ， 就 有 了 React 组 件 分 
类 的 概念 。React 的 组 件 分 类 ， 主 要 是 以 两 方面 为 标准 的 : 一 方面 是 呈现 ， 一 方面 是 管理 。 这 
就 是 本 节 中 将 要 讲述 的 两 类 组 件 : 木偶 组 件 (Dumb Component ) 和 智能 组 件 〈Smart 


Component) 。 


6.2.1 木偶 组 件 和 智能 组 件 


木偶 的 含义 为 呆板 ， 能 够 理解 的 事物 很 少 。React 的 木偶 组 件 的 含义 类 似 ， 负 责 功能 比较 
单一 ， 主 要 是 担任 呈现 UI 职责 。 智 能 的 含义 为 灵活 ， 能 够 处 理 各 种 各 样 的 复杂 操作 。React 
的 智能 组 件 用 于 处 理 一 些 复杂 的 逻辑 操作 。 为 什么 要 进行 这 样 的 分 类 呢 ? 

在 项 目 开发 中 , 经 常会 遇 到 这 种 情况 : 通过 后 台 接 口 从 数据 库 获 取 个 人 信息 ,然后 将 个 人 
信息 数据 陈列 出 来 。 这 里 就 以 该 场景 为 基础 ， 实 现 一 个 列表 的 数据 展示 的 功能 ， 如 示例 6-4 所 
不 。 

【示例 6-4 ”列表 展示 数据 】 

将 要 展示 的 数据 先 保存 到 一 个 json 文件 中 ， 名 为 datajson， 内 容 如 下 : 

[ 

famennReacE doOL] 
LV"name" "Von eqw O02 
{"name":"Angular", "id":"03"} 


L 


每 一 项 都 有 两 个 属性 ， 分 别 是 name 属性 和 id 属性 : name 是 用 来 展示 呈现 的 ，id 是 用 来 
区 分 同 级 同 组 节点 的 。 下 面 是 项 目 代码 : 

<!DOCTYPE html> 

<html lang="en"> 


<head> 
<meta charset="UTF-8"> 
<title> 列 表 展 示 数 据 </title> 
<script crossorigin src="https://unpkg.com/react@16/umd/ 
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Freact .development .js"></script> 
<script crossorigin src="https://unpkg.com/react-dom@16/umd/ 
react-dom.development .js"></script> 
<script src="https://unpkg.com/babel-standalone@6/ 
babel.min.js"></script> 
<script src="jquery-3.3.1.min.js"></script> 
</head> 
<body> 
<div id="root"></div> 
<script type="text/babel"> 
class CommentList extends React.Component { 
constructor(props) { 
super (props); 
this.state = { languages: [] } 


} 
componentDidMount () { 
$.ajax({ // 通 过 ajax 请 求 获取 json 文件 中 的 数据 
url "datas son®., 
dataType: 'json', 
success: function(languages) { 
this.setstate({languages: languages}); 
} .bind (this) 
1); 
} 
render() { 
Feturn ( 
<ul> 
{this.state.languages.map (function (language) { 
// 通 过 map 方法 循环 列表 
return ( 
<ul key={language.id}> 
<li >{language.name}</1i> 
</ul> 


} 
ReactDOM.render (<CommentList />,document getElementById ("root")); 
</script> 
</body> 


80 


第 6 章 ，React 组 件 编写 实战 


</html> 


上 述 示例 可 以 分 为 两 部 分 : 一 部 分 为 ajax 请 求 获取 json 文件 内 容 ， 另 一 部 分 是 将 获取 到 
的 数据 进行 UI 演 染 。 读 者 有 没有 觉得 这 种 组 件 的 实现 方式 有 些 不 妥 ? 如 果 数 据 请 求 来 源 很 多 
并 且 处 理 数 据 步 又 很 多 ， 将 所 有 代码 都 放 在 一 个 组 件 中 ， 是 不 是 很 “ 腾 肿 ” 呢 ? 另外 ，React 
组 件 的 设计 思想 就 是 单一 化 功能 ， 把 ajax 获取 数据 的 部 分 和 UI 泻 染 放 在 一 起 ， 是 不 是 有 点 不 
妥 呢 ?如 果 把 获取 数据 和 UI 泻 染 分 开 ， 分 别 放 在 一 个 独立 的 组 件 中 ， 代 码 的 可 读 性 、 可 维护 


性 、 可 复 用 性 是 不 是 更 好 呢 ? 接 下 来 我 们 将 两 部 分 分 开 ， 如 示例 6-5 所 示 。 
【示例 6-5 木偶 组 件 和 智能 组 件 】 


<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title> 木 偶 组 件 和 智能 组 件 </title> 
<script crossorigin src="https://unpkg.com/react@16/umd/ 
react .development .js"></script> 


<script crossorigin src="https://unpkg.com/react-dom@16/umd/ 


react-dom.development .js"></script> 
<script src="https://unpkg.com/babel-standalone@6/ 
babel .min.js"></script> 
<script src="jquery-3.3.1.min.js"></script> 
</head> 
<body> 
<div id="root"></div> 
<script type="text/babel"> 
// 木 偶 组 件 
class CommentList extends React.Component{ 
constructor (props){ 
super (props); 
} 
render() { 
console.1og (this.props) 
Feturn ( 
<ul> 
{this.props.languages.map (function (language) 
return ( 
<ul key={language.id}> 
<li >{language.name}</1i> 
</ul> 


{ 
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} 
} 
// 智 能 组 件 
class CommentContainer extends React.Component{ 
constructor (){ 
super (); 
this.state = { 
languages:[] 
}; 
1 
componentDidMount (){ 
$.ajax({ 
Urls "data. json", 
dataType: 'json', 
success: function(languages) { 
this.setstate({languages: languages}); 
}.bind (this) 
}); 
} 
Frender () { 
return <CommentList languages={this.state.languages}/> 
} 
} 
ReactDOM. render (<CommentContainer />,document .getElementById ("root")); 
</script> 
</body> 
</html> 


按照 不 同 的 关注 点 将 内 容 分 离 ， 木 偶 组 件 只 关注 接收 数据 并 将 其 呈现 ， 不 涉及 数据 操作 ， 
而 智能 组 件 需 要 考虑 更 多 的 逻辑 操作 性 问题 。 这 样 有 利于 组 件 复 用 和 维护 ,前 端的 项 目 ， 界面 
UI 会 经 常 性 发 生变 动 , 但 是 其 具体 操作 是 业务 逻辑 , 变化 很 少 , 而 木偶 组 件 主要 负责 UI 呈现 ， 
一 旦 UI 发 生变 化 ， 只 修改 木偶 组 件 即 可 。 示 例 6-5 的 运行 效果 如 图 6-1 所 示 。 


图 6-1 木偶 组 件 和 智能 组 件 


木偶 组 件 和 智能 组 件 也 称 作 呈现 组 件 (Presentational Component) 和 容器 组 件 (Container 
Component) 。 读 者 如 果 在 网 上 看 到 这 样 的 概念 ， 要 知道 是 一 回 事 。 


@ 木偶 组 件 的 特点 : 只 关注 UI 呈现 ， 不 关心 数据 操作 及 来 源 ， 更 像 是 一 个 UI 接口 。 
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通常 没有 自己 的 state 属性 ， 数 据 主要 是 通过 props 来 获取 。 木 偶 组 件 通 常 可 以 写 为 
无 状态 的 函数 组 件 (可 参考 6.1 节 ) 。 


@ ”智能 组 件 的 特点 : 只 关注 事务 逻辑 操作 ， 有 自己 的 state， 并 且 不 关注 UI 怎么 呈现 。 
6.2.2 高 阶 组 件 


在 介绍 高 阶 组 件 之 前 ， 先 带领 读者 理解 一 下 高 阶 函 数 。 所谓 高 阶 函数 ,就 是 可 以 以 一 个 函 
数 为 入 参 , 返回 结果 也 可 能 是 函数 的 一 个 复杂 函数 。 其实 之 前 用 到 的 setTimeout(、Array.map() 
都 是 高 阶 函数 。 这 里 自 定义 一 个 简单 高 阶 函数 ( 见 示例 6-6) ， 可 能 会 更 好 理解 。 

【示例 6-6 ”高 阶 函数 】 


<!DOCTYPE html> 


<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title> 高 阶 函数 </title> 
<script type="text/javascript"> 
function add(x,y) { 
return X+Y7 
} 
function higherFunc(x,y,f) { 
return f(x,y) 
} 
console.1og (higherFunc (1,2,add)) 
</script> 
</head> 
<body> 
</body> 
</html> 


对 上 述 示例 进行 一 下 分 析 : add 为 一 个 自 定义 函数 ， 实 现 两 数 相 加 功能 ， 并 返回 结果 。 
higherFunc 也 是 一 个 自 定义 函数 , 但 是 有 三 个 参数 , 并 且 第 三 个 参数 为 函数 ,在 执行 higherFunc 
函数 时 ， 可 以 推导 运行 过 程 : 


il 
加 


x 
f = add (1,2) => 结 果 为 3 
return f(1,2) => 结 果 为 3 


所 以 上 述 示例 中 ，log 输出 结果 为 3。 
高 阶 组 件 的 官方 定义 如 下 : 


A higher—order component is a function that takes a component and returns a new combponent。 
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通俗 地 讲 ， 高 阶 组 件 就 是 一 个 函数 ， 其 参数 可 以 接收 一 个 组 件 ， 然 后 可 以 返回 一 个 组 件 ， 
用 以 下 方式 表示 : 
const EnhancedComponent = higherOorderComponent (WrappedComponent); 


高 阶 组 件 可 以 理解 为 一 个 工厂 模式 , 现 有 一 些 共同 的 基础 组 件 , 然后 经 过 工厂 的 加 工 , 可 
以 得 到 一 个 新 的 组 件 。WrappedComponent 就 是 一 些 共同 的 基础 组 件 ，higherOrderComponent 
为 一 个 工厂 ，EnhancedComponent 就 是 加 工 后 的 新 组 件 。 下 面 通过 示例 6-7 来 了 解 一 下 高 阶 组 
件 的 用 法 。 


【示例 6-7 高 阶 组 件 的 应 用 】 


<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title> 高 阶 组 件 的 应 用 </title> 
<script crossorigin src="https://unpkg.com/react@16/umd/ 


react .development .js"></script> 
<script crossorigin src="https://unpkg.com/react-dom@16/umd/ 
react-dom.development .js"></script> 
<script src="https://unpkg.com/babel-standalone@6/ 
babel.min.js"></script> 
</head> 
<body> 
<div id="root"></div> 
<script type="text/babel"> 
function HOC (WrappedComponent) { // 高 阶 组 件 ， 用 来 加 工 被 包装 组 件 
return class extends React.Component{ 
render (){ 
return ( 
<div> 
<h1> 这 是 标题 </h1> 
<WrappedComponent /> 
</div> 


} 
class HelloWorld extends React.Component{ // 要 被 包装 的 组 件 
render(){ 
return <div> 这 是 内 容 </div> 
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Var NewComponent = HOC (HelloWorld); 

ReactDOM.render (<NewComponent/>, document .getElementById ("root") ) 7 
</script> 
</body> 
</html> 


在 上 述 示 例 中 , <HelloWorld/> 是 需要 被 包装 的 组 件 , 其 泻 染 只 有 “<div> 这 是 内 容 </div>”， 
效果 如 图 6-2 所 示 。 如 果 需 要 在 该 组 件 上 进行 进一步 的 加 工 ， 就 可 以 利用 高 阶 组 件 来 对 其 进行 
处 理 。HOC 就 是 一 个 可 以 对 基础 组 件 进行 加 工 的 高 阶 组 件 。 


图 6-2 高 阶 组 件 为 基础 组 件 添加 标题 
对 于 上 述 示例 ， 读 者 还 可 以 打开 浏览 器 的 开发 者 工具 ， 对 这 一 结构 进行 分 析 ， 如 图 6-3 所 


VClasS> 一 5 加 工 后 的 新 组 件 


v<div> 
<h1> 这 是 标题 </h1> 


v<Hetlonortd> 一 一 一 一 一 > 基础 组 件 


<div> 这 是 内 容 </div> 


</HellowWorld> 
</div> 
</_class> 


图 6-3 高 阶 组 件 DOM 结构 


关于 高 阶 组 件 的 具体 用 法 ,目前 流传 的 有 两 类 用 法 : 一 类 是 属性 代理 (Props Proxy, PP)， 
另 一 类 是 反 向 继承 (Inheritance Inversion, II) 。 


(1) 属性 代理 

基础 组 件 ， 也 就 是 需要 被 包装 的 组 件 ， 其 自身 可 能 会 有 一 些 props 和 state 属性 ， 进 入 高 
阶 组 件 这 个 工厂 后 ，props 有 可 能 会 被 工厂 私自 修改 ， 加 工 后 得 到 的 新 组 件 props 或 者 state 是 
修改 后 的 属性 值 。 这 就 是 属性 代理 的 含义 。 这 里 以 示例 6-8 来 进行 分 析 。 


【示例 6-8 ”高 阶 组 件 的 属性 代理 】 


<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<tit1le> 高 阶 组 件 的 属性 代理 </title> 
<script crossorigin src="https://unpkg.com/react@16/umd/ 
react .development .js"></script> 
<script crossorigin src="https://unpkg.com/react-dom@16/umd/ 


react-dom.development .js"></script> 
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<script src="https://unpkg.com/babel-standalone@6/ 
babel.min.js"></script> 
</head> 
<body> 
<div id="root"></div> 
<script type="text/babel"> 
function HOC (WrappedComponent) { 
return class extends React.Component{ 
render (){ 
const newProps={ // 定 义 新 props 
name:"Hello React!", 
language:"Javascript" 
} 
return ( 
<div> 
<h1> 这 是 标题 </h1> 
<WrappedComponent {...this.props} {...newProps}/> 
</div> 


} 
class HelloWorld extends React.Component{ 
static defaultProps={ 
name : "Hello World!" 
componentDidMount () { // 输 出 组 件 属性 
console.1log (this.props); 
} 
render(){ 


return <div>{this.props.name}</div> 


} 

Var NewComponent = HOC (HelloWorld); 

ReactDOM.render (<NewComponent/>, document .getElementById ("root") ) 7 
</script> 
</body> 
</html> 


原始 组 件 的 props.name 值 为 “Hello World! ”, 经 过 属性 代理 后 , 运行 结果 如 图 6-4 所 示 。 


图 6-4 属性 代理 后 原始 组 件 props 发 生 改 变 
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可 以 看 到 ， 原 始 组 件 的 props 发 生 了 变化 ， 原 始 的 props.name 变 为 “Hello React! ”， 并 
且 增 加 了 一 个 属性 props.language。 


(2) 反 向 继承 
高 阶 组 件 中 传 入 的 基础 组 件 会 被 高 阶 组 件 继承 。 这 样 的 话 ， 基 础 组 件 成 为 父 类 ， 高 阶 组 件 
成 为 子 类 ， 这 就 是 反 向 继承 的 意思 。 下 面 用 示例 6-9 来 进行 该 用 法 的 介绍 。 


【示例 6-9 高 阶 组 件 的 反 向 继承 】 


<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title> 高 阶 组 件 的 反 向 继承 </title> 
<script crossorigin src="https://unpkg.com/react@16/umd/ 
react .development .js"></script> 
<script crossorigin src="https://unpkg.com/react-dom@16/umd/ 
react-dom.development .js"></script> 
<script src="https://unpkg.com/babel-standalone@6/ 
babel.min.js"></script> 
</head> 
<body> 
<div id="root"></div> 
<script type="text/babel"> 
function HOC (WrappedComponent) { 
return class extends WrappedComponent{ 
componentDidMount (){ 
this.setstatel({ 
isShow:false 
}) 
} 
render(){ 
return ( 
super.render () 


} 
class HelloWorld extends React.Component{ 
constructor(){ 
Super (); 
this.state={ 


isShow : true 


87 


React.js 实战 


二 
Fender (){ 
console.1log(this.state) // 查 看 state 的 变化 过 程 
return <div>{this.state.isshow?"Hello World":""}</div> 
// 判 断 state.isshow 值 ， 如 果 为 true 则 显示 内 容 ， 反 之 不 显示 
} 
i 
Var NewComponent = HOC (HelloWorld); 
ReactDOM. render (<NewComponent/>, document .getElementById ("root")); 
</script> 
</body> 
</html> 


HOC 高 阶 组 件 继承 基础 组 件 HelloWorld， 原 始 基 础 组 件 HelloWorld 的 state.isShow 值 为 


true， 经 过 HOC 组 件 后 将 其 state 值 进行 了 改变 ， 最 后 的 结果 是 将 演 染 的 元 素 进行 隐藏 。 这 里 
需要 注意 ， 基 础 组 件 中 的 render() 方 法 中 有 console log 输出 ， 结 果 如 图 6-5 所 示 。 


图 6-5 基础 组 件 的 console.log 日 志 输 出 


读者 有 没有 这 样 的 疑问 ,为 什么 会 输出 两 次 , 并 且 两 次 的 输出 结果 不 一 样 ? 这 里 需要 注意 ， 
在 高 阶 组 件 中 修改 state 属性 是 在 componentDidMount() 方 法 中 执行 的 ， 第 一 次 的 泻 染 state 属 
性 并 没有 改变 ， 等 泻 染 后 调用 componentDidMount( 方 法 ， 这 时 执行 setState，React 会 在 执行 
setState 后 自动 调用 render() 方 法 ， 此 时 state 中 的 属性 isShow 值 已 经 改变 成 了 false， 所 以 第 二 
次 的 输出 为 false。 
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随 着 单 页 面 (SPA) 的 发 展 以 及 Web 前 端 项 目的 需求 越 来 越 复杂 ， 数 据 管 理 成 了 一 个 非 
常 困难 的 问题 。 对 于 一 些 大 型 项 目 ， 如 果 单 纯 依靠 React 来 实现 ， 后 续 的 各 种 页 面 组 件 状态 会 
变 得 越 来 越 难 管理 ， 更 何况 React 只 是 在 View 层 的 一 个 框架 。 其 实 对 于 数据 管理 ，Facebook 
在 2014 年 提出 了 Flux 架构 的 概念 ， 也 得 到 了 很 多 前 端 开发 者 的 追随 ， 后续 还 有 一 些 开发 者 对 
进行 了 改进 优化 。 到 了 2015 年 ，Redux 诞生 ， 将 Flux 进行 了 融合 ， 很 快 成 为 前 端 很 流行 的 
开发 框架 。 本 章 主 要 讲述 Redux 这 一 前 端 框架 。 


总 览 React 数据 管理 


早期 的 Web 项 目 需求 比较 简单 ， 涉 及 的 UI 泻 染 主要 来 自 CSS 的 修饰 ， 界 面 数据 相对 简 
单一 点 。 后 来 随 着 Web 前 端 技术 的 发 展 ， 以 及 日 益 增长 的 用 户 需求 ， 促 发 了 许多 新 型 框架 的 
生产 。 其 实 读者 可 以 想 一 想 , 很 多 新 技术 的 出 现 一 定 是 有 一 个 前 提 的 , 那 就 是 某 个 领域 的 发 展 
是 需要 这 个 东西 的 ， 并 且 新 技术 能 够 火 起 来 ， 一 定 是 符合 当时 需求 的 。 正 如 现在 的 JavaScript 
单 页 面 应 用 ， 市 场 流行 这 样 的 项 目 结构 ， 然 而 以 前 的 框架 满足 不 了 这 种 开发 需求 。 其 实 这 种 需 
求 大 多 数 来 源 于 数据 ， 因 为 现在 的 一 些 大 型 项 目 , 数据 非常 庞大 ， 如 果 没 有 一 个 合理 的 数据 管 
理 机 制 ,那么 项 目 会 做 的 越 来 越 难 ， 后 期 维护 更 是 无 从 下 手 。 本 节 主 要 讲解 关于 状态 管理 的 几 
种 前 端 框架 。 


7.1.1 Flux 的 出 现 

Flux 的 出 现 是 Web 前 端 发 展 的 一 个 必 经 过 程 ， 如 果 当 时 不 是 Flux， 那 也 会 有 其 他 的 模式 
或 者 框架 来 填充 这 一 块 空白 ， 因 为 当时 的 市 场 需求 单 从 React 层面 已 经 无 法 满足 。 打 个 比方 ， 
一 家 小 型 互联 网 公司 ， 人员 组 织 架构 比较 简单 ,做 的 业务 可 能 也 相对 不 复杂 ， 这 个 时 候 为 了 节 
约 成 本 ,可 能 一 个 人 负责 好 几 个 人 的 工作 职责 ,一 个 程序 员 有 可 能 前 端 和 后 端 一 起 做 , 但 是 如 
果 公 司 组 织 结构 比较 庞大 , 并 且 市 场 业务 比 较 多 ， 如 果 还 按照 小 公司 的 规章 制度 来 管理 ， 难 免 
会 出 各 种 各 样 的 问题 。 

现在 读者 应 该 知道 了 吧 ，React 的 优势 在 于 能 够 把 View 层 分 解 成 各 个 小 部 分 ， 让 整个 项 
目 更 加 模块 化 。 传 统 的 MVC 模式 ， 除 了 View 层 的 实现 ， 还 有 数据 层 和 控制 层 的 实现 。 当 时 
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Facebook 也 意识 到 ， 虽 然 React 在 View 层 做 的 已 经 很 优秀 了 ， 但 是 在 真正 的 项 目 中 难免 还 会 
有 Model 层 和 Controller 层 的 涉及 ， 所 以 2014 年 Facebook 推出 了 Flux。 其 实 Flux 的 出 现 ， 
更 像 是 在 填充 React 的 空白 ， 协 助 React 成 为 一 个 新 的 MVC 模式 。 下 面 将 带领 大 家 了 解 Flux 
的 组 成 部 分 以 及 Flux 的 具体 应 用 。 
Flux 主要 涉及 4 个 重要 概念 : 


@ Dispatcher: 处 理 动作 的 一 个 分 发 器 ， 是 Flux 应 用 程序 中 数据 流 的 中 心 枢纽 ， 主 要 任 
务 是 将 收 到 的 行为 分 发 给 Store。 

Store: 对 数据 进行 管理 。 

View: React 组 件 ， 主 要 负责 View 层 。 

Action: 提供 给 Dispatcher， 传 递 数 据 给 Store。 


官方 给 出 的 Flux 的 整个 结构 如 图 7-1 所 示 。 


Action creators are helper 
methods, collected into a library, 
that create an action from method 


parameters, assign it a type and 
provide it to the dispatcher 


Every action is sent to all After stores update themselves in response to 
stores via the callbacks the an action, they emit a change event. 
stores register with the 


Special views called controller-views, listen for 
dispatcher 


change events, retrieve the new data from the 
stores and provide the new data to the entire 
tree of their child views. 


图 7-1 Flux 整体 结构 图 


从 结构 图 可 以 看 到 ， 在 Flux 的 应 用 程序 中 ， 数 据 流 是 单 向 的 ， 这 样 可 以 更 好 地 控制 数据 
状态 。 首 先 会 产生 一 个 事件 ， 一 般 是 由 用 户 对 界面 执行 的 一 个 操作 ，Action 得 到 这 个 操作 后 ， 
将 其 交 给 Dispatcher， 再 由 Dispatcher 来 进行 分 发 给 Store，Store 收 到 通知 后 对 相关 数据 进行 
维护 ， 再 发 出 一 个 更 改 通知 ， 告 诉 视图 层 需要 更 新 View 了 ， 然 后 重新 从 Store 中 检索 数据 ， 
调用 setState 方法 对 View 进行 更 新 。 这 里 以 一 个 Flux 官方 示例 对 其 进行 讲解 ， 如 示例 7-1 所 


示 。 


【示例 7-1 Flux 示例 】 
该 项 目的 核心 目录 结构 如 图 7-2 所 示 ， 这 是 src 目录 。 
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src— -bash—77x24 
anghongdeMacBook-Air:sre 1iujionghongs tree 


[一 ppConrainer-js 
ara 

(~ counter.js 
-Toeo.is 
(| TodoAetionTypes.js 
| Todoacrions.js 


广 reor,js 
[一 Appview .js 


3 directories, 11 files 
liujianghongdewacBcoxk-Airzsre 1iujianghongs | 


图 7-2 Flux 核心 目录 结构 
(1) 和 src 目录 并 列 的 还 有 index.html， 用 来 引用 相关 的 样式 文件 和 JavaScript 文件 ， 并 
定义 需要 显示 的 DOM 元 素 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>Flux 。 TodoMVvC</title> 
<link rel="stylesheet" href="todomvc-common/base.css"> 
</head> 
<body> 
<section id="todoapp"></section> 
<footer id="info"> 
<p>Double-click to edit a todo</p> 
<p>Part of <a href="http://todomvc.com">TodoMVC</a></p> 
</footer> 
<script src="./bundle.js"></script> 
</body> 
</html> 


(2) 依据 Flux 数据 的 流动 过 程 , 让 用 户 对 界面 触发 一 个 事件 后 , Action 会 得 到 这 一 消息 ， 
下 面 看 一 下 担任 Action 角色 的 TodoAction .js 文件 : 


vise strictn; 
import TodoActionTypes from './TodoActionTypes'; 
import TodoDispatcher from './TodoDispatcher'; 
const Actions = { 
addTodo (text) { 
TodoDispatcher.dispatch({ 
type: TodoActionTypes.ADD TODO, 
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updateDraft (text) { 
TodoDispatcher.dispatch({ 
type: TodoActionTypes.UPDATE DRAFT, 
text, 


} v 
] 7 
export default Actions; 
Action 中 定义 了 对 DOM 的 不 同 操作 函数 ， 并 且 每 个 函数 都 是 Dispatcher 中 的 函数 ， 
Action 接收 到 动作 之 后 ， 会 将 该 动作 的 相关 信息 告诉 Dispatcher。 


(3) doDispatcherjs 用 于 导入 Flux 的 Dispatcher。 


I 


VBS SErictY 
import {Dispatcher} from ‘flux'; 
export default new Dispatcher(); 


(4) 定义 Store。TodoStore.js 代码 如 下 : 


/** 
* Copyright (c) 2014-present, Facebook, Inc. 
* All rights reserved. 
大 
* This source code is licensed under the BSD-style license found in the 
* LICENSE file in the root directory of this source tree. An additional grant 
* of patent rights can be found in the PATENTS file in the same directory. 
这 
"use. strict"y 
import Counter from './Counter'; 
import Immutable from 'immutable'; 
import {ReduceStore} from "flux/utils'7 
import Todo from './Todo'; 
import TodoActionTypes from './TodoActionTypes'; 
import TodoDispatcher from './TodoDispatcher'; 
class TodoStore extends ReduceStore { 
constructor() { 
super (TodoDispatcher); 
} 
getInitialstate() { 
return Immutable.OrderedMap (); 
reduce (state, action) { 
switch (action.type) { 
case TodoActionTypes.ADD TODO: 
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// Don't add todos with no text. 
1 (actiond texty LE 
return state; 
const id = Counter.increment (); 
return state.set(id, new Todo({ 
id, 
text: action.text, 
complete: false, 
1 
Case TodoActionTypes.DELETE COMPLETED TODOS: 
return state.filter(todo => !todo.complete); 
case TodoActionTypes.DELETE TODO: 
return state.delete(action.id); 
case TodoActionTypes.EDIT TODO: 
return state.setIn([action.id, 'text'], action.text); 
case TodoActionTypes.TOGGLE ALL TODOS: 
const areAllComplete = state.every(todo => todo.complete); 
return state.map (todo => todo.set('complete', !areAllComplete)); 
case TodoActionTypes.TOGGLE TODO: 
return state.update( 
actionid, 
todo => todo.set ('complete', !todo.complete), 
De 
default: 
return state; 


} 
export default new Todostore(); 


Store 对 数据 进行 维护 后 ,调用 对 state 进行 更 新 , 然后 重新 泻 染 视图 ,效果 如 图 7-3 所 示 。 


What needs to be done? 


下 午 20:00 和 女 朋 友 约 会 
下 午 15:00 项 目 组 例会 


上 午 9:30 小 组 例会 


图 7-3 TodoList 运行 效果 图 
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画 该 示例 的 源码 没有 带 node modules 目录 ， 在 运行 时 如 果 出 错 ， 就 先 使 用 npm install | 
依赖 。 
攻 


7.1.2 Mobx 


Mobx 是 一 个 用 于 状态 管理 的 库 ， 和 React 是 一 对 很 搭 的 组 合 。React 在 View 层 提供 了 很 
好 的 解决 方案 ，Mobx 对 状态 管理 具有 极 大 的 简易 性 和 可 扩展 性 ， 二 者 搭配 ， 能 够 很 好 地 管理 
一 些 大 型 前 端 项 目 。 本 小 节 将 介绍 Mobx 的 原理 。 

Mobx 的 工作 原理 大 概 如 图 7-4 所 示 。 在 整个 数据 流 中 ,首先 用 户 的 触发 事件 到 达 Actions 
中 , 然后 依据 事件 属性 及 事件 要 求 在 State 中 对 状态 值 进 行 修 改 , 接 下 来 用 新 的 State 数据 计算 
所 需要 的 Computed values， 最 后 响应 演 染 UI 视图 层 。 


state 的 东西 并 且 梧 确 凑 它 MonX 全 生动 更 新 它 并 在 它 不 再 使 用 时 PP 生 一 个 值 , 丙 是 合生 一 些 吕 ff 用 
MHP. CT 人 UL 


assrvertt todos ) > 


图 7-4 Mobx 原理 图 


7.1.3 ”Redux 应 运 而 生 


React 对 DOM 进行 抽象 管理 ， 可 以 使 用 组 件 构 建 虚拟 DOM， 组 件 的 HTML 结构 不 再 是 
直接 生成 DOM， 而 是 映射 生成 虚拟 的 JavaScript DOM 结构 。React 通过 diff 算法 将 最 小 变更 
写 入 DOM 中 ， 从 而 减少 DOM 的 实际 次 数 ， 提 升 性 能 。React 只 负责 试图 进行 组 件 化 管理 ， 
不 涉及 任何 的 数据 和 控制 ， 但 是 在 实际 应 用 开发 过 程 中 一 定 会 面临 组 件 之 间 如 何 通信 的 问题 ， 
以 及 数据 与 视图 之 间 如 何 实现 便捷 的 数据 流转 的 问题 ， 需 要 数据 流 才能 完成 完整 的 应 用 。 

Flux 与 传统 的 MVC 不同 的 是 采用 单 向 数据 流 ， 不 允许 Model 和 Controller 互相 引用 。 但 
是 ，Flux 也 有 其 缺点 。 

@ 首先 ， 使 用 Flux 时， 同一 个 应 用 中 可 以 同时 使 用 多 个 Store， 并 且 不 同 的 Store 之 间 

可 能 有 依赖 关系 或 引用 关系 ， 这 样 会 造成 系统 的 辜 合 度 过 高 ， 后 期 维护 困难 。 

@ 其 次 ,， 在 Flux 中 ，Store 封装 了 数据 和 数据 处 理 逻 辑 ， 无 法 做 到 时 间 旅 行 ， 即 让 应 用 

程序 切换 到 任意 时 间 的 状态 。 


Redux 由 Flux 演变 而 来 ， 但 受 Elm 的 启发 ， 避 开 了 Flux 的 复杂 性 。Redux 吸收 了 Flux 
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的 优点 , 例如 单 向 数据 流 、 依赖 变动 等 特性 , 但 是, Redux 还 加 入 了 一 些 新 的 特性 , 例如 undo、 
redo 等 。 同 时 ，Redux 保持 轻 量 级 API， 便 于 实现 更 高 层次 的 抽象 。 


Redux 核心 概念 


Redux 的 核心 作用 是 用 于 管理 复杂 的 JavaScript 应 用 中 的 数据 状态 ， 即 我 们 常 说 的 state。 
这 些 状态 包括 UI 状态 、 选 中 的 标签 、 是 否 显示 Loading 动 效 、 分 页 器 、 缓 存 数据 等 。state 本 
身 是 普通 对 象 ， 没 有 修改 器 方法 〈setter 方法 ) ， 而 state 的 修改 是 先 通过 发 起 action 描述 当前 
发 生 了 什么 ， 最 终 通 过 reducer 函数 把 action 和 state 串 起 来 。 


7.2.1 store 


Redux 的 一 个 显著 特点 是 整个 应 用 中 只 提供 一 个 store。 在 Redux 中 ， 整 个 应 用 中 的 所 有 
state 均 存 储 于 同一 棵 对 象 树 中 ， 即 store。 可 以 通过 reducer 创建 store， 例 如 : 


import { createstore } from 'redux' 


import readApp from './reducer' 
let store = CreateStore (readApp) 


通常 ， 我 们 在 开发 应 用 时 ， 常 常 需要 让 服务 端 与 客户 端的 state 在 结构 上 保持 一 致 。 在 这 
种 情况 下 ,我 们 可 以 为 state 设置 初始 状态 ,在 客户 端 使 用 服务 端的 state 初始 化 本 地 数据 ， 例 
如 : 


import { createStore } from 'redux' 
const Store = createstore (readApp, window.STATE SERVER) 


我 们 可 通过 getState 方法 获取 当前 的 state 数 ， 如 示例 7-2 所 示 。 
【示例 7-2 ”getState 方法 】 


console.1log (store.getstate()) 
/* 输出 
{ 
status: 'learning', 
todos: [ 
1 
text: 'learn store', 
completed: true, 
} 
{ 
text: 'learn action', 
completed: false 
}, 
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text: 'learn reducer', 


completed: false 


wh 


store 管理 着 整个 应 用 的 状态 。store 提供 了 一 个 dispatch 方法 ， 可 使 用 dispatch 方法 发 送 
动作 以 修改 store 中 的 状态 ,随后 可 以 再 次 通过 getState 方法 重新 获取 最 新 的 状态 (state ) 。 state 
发 生变 化 时 ， 可 以 通过 store.subscribe(listener) 注 册 监 听 器 ， 以 便 在 state 变化 时 做 相应 的 处 理 ， 
例如 : 


// 打印 初始 状态 


console.1log (store.getstate()) 


// 每 次 state 更 新 时 ， 打 印 日 志 

// 注意 ，subscribe () 返回 一 个 函数 用 来 注销 监听 器 

const unsubscribe = store.subscribe(() => 
console.log(store.getstate()) 


) 
完整 的 示例 代码 如 下 : 


import React from 'react' 

import ReactDOM from 'react-dom' 

import { createstore } from 'redux' 
import Counter from './components/Counter' 
import counter from './reducers' 


const store = createstorel( 
counter, 
window. REDUX DEVTOOLS EXTENSION  && 
window. REDUX DEVTOOLS EXTENSION () 
) // createStore 接收 3 个 参数 : reducer, preloadedSstate, enhancer 
const rootEl = document .getElementById('root') 
// 打印 初始 状态 
console.1og(store.getState () .result) 
// 每 次 state 更 新 时 ， 打 印 日志 
// 注意 ，subscribe () 返回 一 个 函数 用 来 注销 监听 器 
const unsubscribe = store.subscribe(() => 
console.log(store.getstate()) 
) 
const render = () => ReactDOM.renderl( 


<Counter 
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value={store.getstate() .result} 


onIncrement={() => store.dispatch({ type: 'INCREMENT' })} 
onDecrement={ () => store.dispatch({ type: 'DECREMENT' })} 
Pe 
rootEl 
) 
render () 
store.subscribe (render) 
运行 结果 如 图 7-5 所 示 。 
B42px x 150p 
Clicked: Otimes + - Incrementifodd Incrementasync 
民 遇 Eements Console Sources Network Peromance Memory Application Securty Redx » A2 ; X 


Inspector 


INCREMENT 
INCREMEN 
DECREMENT 
DECREMENT 
» {result; 
* {result: 
» {result; 
» {result: 


图 7-5 


7.2.2 action 


store.subscribe 示例 


Autoselect instances 


Action Stote OF 


index. js: 


index. js: 


index. js: 


由 于 state 是 只 读 的 ， 唯 一 可 以 改变 状态 的 途径 是 触发 action。action 是 一 个 普通 对 象 ， 可 


于 描述 已 经 发 生 的 事件 。 例 如 ，F 


户 年 


按钮 、 输 入 表单 、 拖 搜 、 服 务 器 数据 推送 、 路 由 
化 等 ， 最 终 都 会 转换 成 对 应 的 action， 而 且 这 些 action 会 按 顺 序 执行 ， 这 种 简单 化 的 方法 上 


局 


变 


来 非常 方便 。 我 们 可 以 通过 store.dispatch(action) 方 法 把 action 对 象 传递 给 store， 例 如 : 


Const action = { 
type: 'READ', 
msg: "Keep on” 

}; 


store.dispatch (action); 


从 代码 可 以 看 出 ，action 本 质 上 是 一 个 普通 对 象 ， 其 中 的 type 属性 是 必需 的 ， 表 示 action 


的 名 称 ， 
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段 之 外 ， 其 他 结构 开发 者 自行 定义 即 可 。 
在 实际 的 应 用 中 ， 通 常 使 用 action 创建 函数 来 生成 action。 在 Redux 中 ，action 创建 函数 
只 是 简单 地 返回 一 个 action， 例 如 : 


function addToRead (text) { 


return { 
type: "READ', 
msg: "Keep on', 
index: 1 

} 

} 


在 Redux 中 ， 把 action 创建 函数 返回 的 结果 传递 给 dispatch 方法 即 可 触发 一 次 dispatch， 
例如 : 


dispatch (addToRead ('books')) 


使 用 action 创建 函数 的 优点 是 便于 移植 和 测试 具体 的 业务 单元 , 同时 也 可 以 使 用 异步 非 纯 
函数 作为 action 的 创建 函数 ， 形 成 异步 控制 流 。state 只 能 通过 action 触发 修改 , 不 允许 视图 或 
网 络 请 求 直 接 修改 state， 只 能 通过 视图 或 网 络 请 求 描述 需要 发 生 的 变更 。 最 终 ， 所 有 的 修改 
都 被 集中 处 理 ， 严 格 按照 顺序 依次 执行 。 

完整 代码 如 下 : 

/* 

* action 类 型 

人 


export const ADD READ = 'ADD READ'; 
export const TOGGLE = 'TOGGLE" 
export const DELETE READ = 'DELETE READ' 


/* 
* 其 他 的 常量 
记 办 


export const VisibilityFilters = { 
SHOW_ALL: 'SHOW ALL', 
SHOW_COMPLETED: "SHOW COMPLETED"', 
SHOW_ACTIVE: "SHOW ACTIVE" 

} 


4 


* action 创建 函数 
A 
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export function addRead (text) { 
return { type: ADD READ, text } 


export function toggle (index) { 
return { type: TOGGLE, index } 


export function deleteRead(filter) { 
return { type: DELETE READ, filter } 


7.2.3 reducer 

7.22 小 节 中 提 到 action 描 述 发 生 的 具体 动作 ,但 是 action 并 没有 描述 如 何 更 新 应 用 的 state。 
通过 dispatch 发 起 action 之 后 ,最 终 是 通过 reducer 指定 如 何 修改 state tree 的 。 也 就 是 说 ,reducer 
是 用 来 修改 状态 的 。 我 们 先 确定 state 对 象 的 结构 ， 再 开始 编写 reducer。reducer 是 纯 函 数 ， 接 
收 action 和 当前 state 作为 参数 ， 并 返回 一 个 新 的 state。 


/* state 结构 


{ 
status: 'learning', 


todos: [ 
上 
text: 'learn store', 
completed: true, 


’ 


{ 
text: 'learn action', 
completed: false 


天 


text: 'learn reducer' 


completed: false 


} 
二 
const reducer = function (state = [], action) { 
// 其 他 逻辑 处 理 可 以 写 在 这 里 
Switch (action.type) { 
// ADD_READ 操作 


100 


第 7 章 ”Redux 数据 管理 


case "RDD READ': 
return [ 
Sa 
{ 
text: action.text, 
completed: false 
} 
] 
Case "COMPLETE RERAD' : 
return state.map((articles, index) => { 
if (index === action.index) { 
return Object.assign({}, articles, { 
completed: true 
}) 
return articles 
}) 
default: 
return state 
} 
]7 


特别 需要 注意 的 是 , 不 要 在 reducer 中 直接 修改 传 入 的 state, 可 以 使 用 Object.assign() 或 延 
展 符号 返回 新 的 state。 我 们 需要 修改 数组 中 指定 的 数据 项 而 又 不 希望 导致 突变 时 ， 推 荐 的 做 
法 是 在 创建 一 个 新 的 数组 后 将 那些 无 须 修改 的 项 原封 不 动 移入 , 接着 对 需要 修改 的 项 用 新 生成 
的 对 象 替换 。 同 时 ， 在 default 情况 下 返回 旧 的 state 即 可 。 此 时 ， 重 新 通过 store.getState 返回 
新 的 状态 ， 可 以 看 出 前 后 两 次 状态 有 可 能 发 生变 化 。 最 终 通 过 store.subscribe， 以 render 作为 
参数 ， 一 旦 监听 到 state 发 生 改变 ， 就 执行 render 函数 ， 这 样 就 可 以 触发 视图 更 新 。 

整体 示例 代码 如 下 : 


import { combineReducers, createstore } from 'redux' 
let reducer = combineReducers({ visibilityFilter, Count }) 
let store = createstore (reducer) 


const reducer = function (state = [], action) { 
// 其 他 逻辑 处 理 可 以 写 在 这 里 
Switch (action.type) { 
case 'ADD READ': 
return [ 
...State, 
是 
text: action.text, 


completed: false 
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] 
Case "COMPLETE READ': 
return state.map((articles, index) => { 
if (index === action.index) { 
return Object.assign({}, articles, { 
completed: true 
}) 
} 
return articles 
}) 
default: 
return state 


}; 


function addReadingBooks (state = [], action) { 
// do something... 
return nextstate 


function showReadingBooks (state = [], action) { 
// 其 他 逻辑 处 理 可 以 写 在 这 里 
// 处 理 完毕 之 后 返回 新 的 状态 


return nextstate 


let App = combineReducers ({ 
addReadingBooks, 
showReadingBooks 

}) 


7.2.4 connect 


Redux 和 React 之 间 没 有 关系 .Redux 支持 React、Angular、.Ember、jQuery 甚至 纯 JavaScript。 
尽管 如 此 , Redux 最 好 还 是 和 React 和 Deku 这 类 框架 搭配 起 来 用 , 因为 这 类 框架 允许 你 以 state 
函数 的 形式 来 描述 界面 ，Redux 可 以 通过 action 的 形式 来 发 起 state 变化 。 

React-Redux 提供 connect 方法 , 用 于 从 UI 组 件 生成 容器 组 件 。connect 的 意思 就 是 将 这 两 
种 组 件 连 起 来 。 


import { connect } from 'react-redux'; 


const Count = connect() (List); 
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在 上 面 的 代码 中 ,Count 是 一 个 UI 组 件 ,List 是 由 React-Redux 通过 connect 方法 自动 生 
成 的 容器 组 件 。 只 是 这 样 纯粹 地 把 Memos 包裹 起 来 毫 无 意义 ， 完 整 的 connect 方法 可 以 这 样 


import { connect } from "react-redux' 

const List = connect( 
mapStateToProps 

) (Count) 


在 上 面 的 代码 中 ，connect 方法 接收 两 个 参数 : mapStateToProps 和 mapDispatchToProps。 
它们 定义 了 组件 的 业务 逻辑 ,前 者 负责 输入 逻辑 , 即将 state 映射 到 UI 组件 的 参数 (props); 
后 者 负责 输出 逻辑 ， 即 将 用 户 对 UI 组 件 的 操作 映射 成 action。 


7.2.5 总结 


Redux 的 核心 设计 是 使 用 单 向 数据 流 。 这 种 设计 使 得 在 所 有 的 应 用 中 数据 都 将 遵循 相同 的 
生命 周期 ,在 应 用 开发 过 程 中 将 更 有 利于 预测 和 理解 应 用 的 状态 。 除 此 之 外 , 单 向 数据 流 的 优 
势 还 体现 在 避免 在 相同 应 用 中 出 现 重复 的 、 不 可 互相 引用 的 数据 ， 使 得 数据 更 加 单纯 。Redux 
的 数据 流转 如 图 7-6 所 示 。 


人 Bd 
~ ~ 


图 7-6 Redux 的 数据 流转 


Redux 应 用 中 的 数据 遵循 如 下 生命 周期 : 
首先 ， 调 用 store.dispatch(action)。 可 以 在 任何 地 方 调用 store.dispatch(action)， 例 如 可 以 在 
组 件 中 、 单 击 事件 回调 中 、 异 步 请 求 的 回调 中 、 定 时 器 中 调用 ， 其 中 action 是 用 于 描述 当前 具 
体 发 生 事件 的 对 象 。 
其 次 ，store 调用 传 入 的 reducer 函数 。store 调用 reducer 时 ,会 向 对 应 的 reducer 传 入 当前 
的 state tree 和 action。reducer 通过 action 的 类 别 和 当前 的 state 进行 计算 ， 最 终 返 回 一 个 新 的 
state。reducer 是 纯 函 数 ， 每 次 传 入 相同 的 输入 必须 产生 相同 的 输出 。 
再 次 , 把 多 个 reducer 的 输出 合并 成 单一 的 state tree。Redux 提供 的 combineReducers 辅助 
函数 可 以 把 根 reducer 拆 分 成 多 个 函数 ， 用 于 分 别处 理 state 树 的 一 个 分 支 。 例 如 : 
function addReadingBooks (state = []，action) { 
// 其 他 逻辑 处 理 可 以 写 在 这 里 
return nextstate 
} 
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function showReadingBooks (state = [], action) { 
// 其 他 逻辑 处 理 可 以 写 在 这 里 
return nextstate 


} 


let App = combineReducers ({ 
addReadingBooks, 
showReadingBooks 
}) 
combineReducers 会 把 两 个 state 合并 成 一 个 state tree。 
最 后 ，store 保存 了 最 新 的 完整 的 state tree。 可 以 调用 store.getState() 获 取 当 前 state， 也 可 
以 根据 最 新 的 state 更 新 组 件 的 View。 


Redux 生态 


随 着 Redux 广泛 使 用 ， 衍 生出 了 丰富 工具 集 和 可 扩展 的 Redux 生态 系统 ， 包 括 中 间 件 、 
工具 库 、 库 和 插件 等 ， 足 以 维护 大 型 项 目 。 本 节 就 Redux 中 常用 的 插件 做 简要 介绍 。 


7.3.1 redux middleware 

Redux 允许 开发 者 自 定义 中 间 件 来 处 理 影响 store 的 dispatch 逻辑 , 也 就 是 说 , Redux 的 中 
间 件 主要 用 在 store 的 dispatch 函数 上 。dispatch 函数 的 作用 是 发 送 actions 给 一 个 或 多 个 reducer 
来 影响 应 用 状态 。 中 间 件 可 以 增强 默认 的 dispatch 函数 。 

Redux 中 间 件 被 设计 成 可 组 合 的 、 会 在 dispatch 方法 之 前 调用 的 函数 ， 例 如 redux-logger 
中 间 件 (下 一 小 节 会 详细 介绍 )。 


7.3.2 redux-logger 
redux-logger 能 够 对 所 有 action 发 生 后 生成 的 state 进行 记录 ， 即 日 志 中 间 件 。 在 项 目 调 
试 阶段 , 我 们 可 以 根据 console.log 输出 判断 业务 中 具体 state 变化 .redux-logger 使 用 示例 如 下 : 
安装 redux-logger: 
npm install --save redux-logger 
在 项 目 中 使 用 redux-logger: 


import thunk from "redux-thunk'7 
import promise from 'redux-promise'; 


import createLogger from 'redux-logger'; 
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// 实例 化 

const logger = createLogger () 7 

// 应 用 中 间 件 

const createStoreWithMiddleware = applyMiddleware (thunk, promise, 
logger) (createstore); 

// 连接 到 store 


const store = createStoreWithMiddleware (reducer); 


以 上 示例 代码 中 ， 首 先导 入 redux-logger， 运 行 createLogger 方法 ， 将 返回 结果 赋值 给 常 
量 。 然 后 将 looger 传 入 applyMiddleware()， 传 入 createStore 方法 ， 就 完成 了 store.dispatch() 的 
功能 增强 .applyMiddleware 方法 是 Redux 的 原生 方法 , 其 作用 是 将 所 有 中 间 件 组 成 一 个 数组 ， 
依次 执行 。 applyMiddleware 方法 的 三 个 参数 就 是 三 个 中 间 件 , 其 中 redux-logger 一 定 要 放 在 最 
后 ， 否 则 输出 结果 会 发 生 错 误 。 
使 用 redux-logger 时 ， 直 接 调用 createLogger()， 不 传 入 任何 参数 则 使 用 默认 的 配置 。 
redux-logger 提供 的 可 配置 参数 如 下 : 
{ 
predicate, // 限制 1ogger 的 条 件 
collapsed, // 分 组 ， 可 以 是 Boolean 值 或 函数 ， 该 函数 入 参 为 getstate 函数 和 action 参数 
duration = false: Boolean, // 打印 每 个 action 
timestamp = true: Boolean, // 打印 每 个 action 执行 的 时 间 惟 


level = 'log': 'log' | 'console' | 'warn' | "error' | 'info',//console 的 级 别 
colors: Colorsobject， // 为 title、 上 一 个 state、action 和 下 一 个 state 定义 不 同 的 颜色 
titleFormatter, // 格式 化 标题 

stateTransformer, // state 转换 

actionTransformer, // action 转换 

errorTransformer, // error 转换 


logger = console: Loggerobject， // 'console' API 的 实现 


logErrors = true: Boolean, // 记录 catch、1og 和 re-throw errors 
diff = false: Boolean, // 标注 states 之 间 的 差异 
diffPredicate // 标注 states 之 间 的 差异 的 条 件 


} 
通常 ， 可 以 在 开发 环境 中 开启 日 志 ， 示 例 代码 如 下 : 


const middlewares = []; 


证 在 (process.env.NODE ENV === "development ') { 


const { logger } = require('redux-logger'); 
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middlewares.push (logger); 


const store = compose (applyMiddleware(...middlewares)) (createstore) (reducer); 
过 滤 指 定 的 action 类 型 : 
createLogger ({ 

predicate: (getstate, action) => action.type !== AUTH REMOVE TOKEN 


]) 7 
定义 stateTransformer 方法 : 


import { Iterable } from 'immutable'7 


Const stateTransformer = (state) => { 
if (Iterable.isIterable(state)) return state.toJs(); 
else return state; 

}; 


const logger = createLogger({ 
stateTransformer, 
]) 7 


使 用 配置 执行 日 志 批量 处 理 示例 代码 如 下 : 


import { createLogger } from 'redux-logger'; 


const actionTransformer = action => { 
if (action.type === 'BATCHING REDUCER.BATCH') { 
action.payload.type = action.payload.map (next => next.type) .join(' => '); 
return action.payload; 


return action; 
] 7 


const level = "info'7 


const logger = {}; 
// 日 志 处 理 
for (const method in console) { 


if (typeof console [method] === "function') { 


1ogger [method] = console [method] .bind(console) 
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// 打印 日 志方 法 
logger[level] = function levelFn(...args) { 


const lastArg = args.pop(); 


if (Array.isArray (lastArg)) { 
return lastArg.forEach(item => { 
console[level] .apply (console, [...args, item]); 
Di; 


console[level] .apply (console, arguments); 
] 7 


export default createLogger ({ 
level, 
actionTransformer, 
logger 

2 


使 用 redux-logger 可 以 在 控制 台 输出 action 的 信息 ， 所 以 首先 要 获取 前 一 个 action、 当 前 
action， 然 后 是 下 一 个 action， 打 印 出 的 日 志 如 图 7-7 所 示 。 


» {result: 1} index.js:21 
v action INCRENENT @ 18:03:95.151 redux-logger, js:1 
prev state » {result: 9} redux~ logger. 1 
action » {type: "INCREMENT"} redux-logger, 

next state » {result: 1} redux-logger,js:1 
» {result: 0} index. js:21 
» action DECREMENT @ 18:03:06.849 
prev state » {result? 1} redux-logger. js:1 
action » {type: "DECREMENT"} redux-logger, js:1 
next state » {result: 9} redux-logger.js:1 
» {result: 1} index, 


action INCRENENT @ 18:03:07.647 redux-logger.. 
prev state » {result: 9} redux-logger, 
action  »{type: “INCREMENT™"} redux-togger,j 
mext state » {result: 1} Tedux=togger 


图 7-7 redux-logger 示例 


7.3.3 redux-thunk 


redux-thunk 是 用 于 在 redux 中 处 理 异 步 action 的 中 间 件 ， 异 步 action 的 场景 包括 需要 在 
action 中 执行 setTimeout， 以 及 需要 通过 fetch 方法 调用 服务 端 API 等 , 对 于 异步 action 的 场景 
可 以 使 用 redux-thunk 中 间 件 来 优化 代码 流程 。redux-thunk 统一 了 异步 和 同步 action 的 调用 方 
式 ， 使 得 异步 过 程 放 在 action 级 别 解决 ， 避 免 异 步 操 作对 component 的 耦合 。 例 如 : 

store.dispatch({ type: 'RDD'，text: ' 添 加 完成 ' }) 

setTimeout (() => { 

store.dispatch({ type: 'COMPLETE'}) 
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}, 1000) 


这 段 代码 中 使 用 setTimeout 延迟 1 秒 触发 SUM 操作 。 使 用 redux-thunk 中 间 件 进行 改造 ， 


首先 安装 redux-thunk: 
npm install redux-thunk --save-dev 


然后 在 代码 中 使 用 redux-thunk: 


import thunk from 'redux-thunk 


import {createstore,applyMiddleware} from "Fredux'" 


import counter from './reducers/counter' 


let store = createStore (counter, applyMiddleware (thunk)) 


使 用 redux-thunk 中 间 件 ， 可 以 让 action 创建 函数 先 不 返回 一 个 action 对 象 ， 而 是 返回 一 
个 函数 ， 函 数 传递 两 个 参数 (dispatch, getState)， 我 们 可 以 在 函数 体内 进行 业务 逻辑 的 封装 : 


function add() { 
return { 
type: "ADD'， 


function addIfodd() { 
return (dispatch, getState) => { 
const currentValue = getstate(); 
if (currentVvalue %$ 2 == 0) { 
return false; 
} 
dispatch (add ()) 


} 
完整 代码 如 下 : 


"Hse strict "rs 


import {createstore, applyMiddleware} from 'redux'; 


import thunk from 'redux-thunk'; 


// count 的 操作 集合 
function count (state = 0, action) { 
switch (action.type) { 
case. "ADD": 
return state + 17 
Case "REDUCER' : 


return state = 1; 
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// 分 发 任务 
store.dispatch(add()); 
store.dispatch(add()); 
store.dispatch (add ()); 
store.dispatch (add ()); 
store.dispatch (reducer ()); 
store.dispatch (addIf0dd () ) 7 
store.dispatch (addAsy ()); 


redux-thunk 中 间 件 可 以 在 发 出 action 到 reducer 函数 接受 action 之 前 执行 具有 副 作 上 


步 操作 。redux-thunk 源码 的 实现 也 较为 简单 : 


function createThunkMiddleware (extraArgument) { 
return ({ dispatch, getSstate }) => next => action => { 
if (typeof action === 'function') { 
return action(dispatch, getState, extraArgument); 
} 


return next (action); 
二 
1 
// thunk 中 间 件 
const thunk = createThunkMiddleware () 
thunk.withExtraArgument = createThunkMiddleware; 


export default thunk; 


的 异 


判别 action 的 类 型 ， 如 果 action 是 函数 ， 就 调用 这 个 函数 ， 实 参 为 dispatch 和 getState， 


因此 我 们 在 定义 action 为 thunk 函数 时 ， 一 般 形 参 为 dispatch 和 getState。 


通过 redux-thunk 来 处 理 异步 操作 , thunk 仅仅 做 了 执行 这 个 函数 ， 并 不 在 乎 函数 主体 内 是 
什么 ， 也 就 是 说 thunk 使 得 redux 可 以 接受 函数 作为 action， 但 是 函数 的 内 部 可 以 多 种 多 样 。 
action 如 此 繁衍 开 来 、 异 步 操作 太 为 分 散 、 规 范 缺失 ， 不 利于 后 期 维护 。action 是 一 个 async 


约定 可 以 减少 函数 action 的 复杂 度 : 


export default function(){ 
return function(dispatch){ 
await result=fetch(...) 
result.then(...) 
] 
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7.3.4 redux-saga 
redux-saga 也 是 Redux 的 一 个 中 间 件 ， 与 redux-thunk 功能 类 似 ， 也 是 主要 集中 管理 React 


WF 


工作 ,可 以 使 有 
加 清晰 , 分 工 明 


使 得 模块 逻辑 更 加 清 夹 。 


首先 ， 安 装 redux-saga: 
npm install --save redux-saga 
在 项 目 中 使 用 redux-saga 时 ， 引 入 redux-saga 并 连接 到 store 中 : 


import React from 'react' 
import ReactDOM from "Freact-dom' 
import { 
createstore, 
applyMiddleware 
} from 'redux' 
import logger from 'redux-logger' 
import createSagaMiddleware from 'redux-saga' 
// 引入 相关 组 件 
import Counter from './components/Counter' 
import counter from './reducers/counter' 
import mySaga from './sagas' 
// 创建 saga 中 间 件 
const sagaMiddleware = createSagaMiddleware () 


// 创建 store 


的 逻辑 和 视 


// createStore 接受 3 个 参数 : reducer，PpreloadedState，enhancer 


Const store = CreateStore ( 
counter, 
window. REDUX DEVTOOLS EXTENSION  && 


window. REDUX DEVTOOLS EXTENSION (), 


applyMiddleware (sagaMiddleware, logger) 


// 运行 saga 
sagaMiddleware.run (mySaga) 


const rootEl = document .getElementById('root') 
// 打印 初始 状态 

console.1og(store .getState () .result) 

// 每 次 state 更 新 时 ， 打 印 日 志 

// 注意 subscribe () 返回 一 个 函数 用 来 注销 监听 器 


中 的 异步 操作 。redux-saga 最 大 的 特点 是 使 用 generator(ES6) 的 形式 , 采用 监听 的 形式 进行 
日 同 步 的 方式 编写 异步 代码 ,使 得 项 目 流程 拆 分 更 细 ， 应 月 


图 拆 分 更 


确 。 项 目 中 异步 的 action 和 复杂 逻辑 的 action 都 可 以 放 到 redux-saga 中 去 处 理 ， 
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const unsubscribe = store.subscribe(() => 
console.1log(store.getstate()) 
) 
// 泻 染 方法 
const render = () => ReactDOM.render!( 
<Counter 
value={store.getstate() .result} 
onIncrement={ () => store.dispatch({ type: 'INCREMENT' })} 
onDecrement={ () => store.dispatch({ type: 'DECREMENT' })} 
onSomeButtonClicked= {() => 
store.dispatch ({type: 'USER FETCH REQUESTED', payload: {userId: 
'test'}}) 
} 
Ws 
rootEl 
) 
// 调用 泻 染 方 法 
render () 
store.subscribe (render) 


使 用 createSagaMiddleware 方 法 创建 redux-saga 的 Middleware, 然 后 在 创建 的 redux 的 store 
时 ， 使 用 applyMiddleware 函数 将 创建 的 saga Middleware 实例 绑 定 到 store 上 ， 最 后 调用 saga 
Middleware 的 run 函数 来 执行 某 个 或 者 某 些 Middleware。 

使 用 redux-saga， 我 们 首先 生成 一 个 集中 处 理 异 步 的 sagas.js 文件 。sagas.js 文件 代码 示例 
如 下 : 

import { call, put, takeEvery, takeLatest } from 'redux-saga/effects' 

import Api from './api' 


// 通过 USER FETCH REQUESTED action 触发 
function* fetchUser (action) { 
Ey 
const user = yield call (Api.fetchUser, action.payload.userId); 
yield put({type: "USER FETCH SUCCEEDED", user: user}); 
ycatch (ey f 
yield put ({type: "USER FETCH FAILED", message: e.message}); 


/* 
每 次 执行 "USER_FETCH REQUESTED、 操 作 时 调用 fetchUser 
Allows concurrent fetches of user. 

i 
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function* mySaga() { 
yield takeEvery ("USER FETCH REQUESTED", fetchUser); 
} 


/* 
也 可 以 使 用 takeLatest 方法 实现 
tf 
function* mySaga() { 
yield takeLatest ("USER FETCH REQUESTED", fetchUser); 
} 


export default mySaga; 


简单 来 说 ，redux-saga 相当 于 在 Redux 原 有 的 数据 流 中 增加 了 一 层 监控 ， 捕 获 监听 到 的 
action 并 进行 处 理 之 后 ,添加 一 个 新 的 action 到 相应 的 reducer 中 执行 处 理 流程 。 在 redux-saga 
中 的 action 与 在 redux 中 同步 action 的 样式 是 相同 的 。 

redux-saga 是 通过 ES6 中 的 generator 实现 的 , 本 质 是 一 个 可 以 自 执行 的 generator。 在 saga 
中 ,可 以 使 用 takeEvery 或 者 takeLatest 等 API 来 监听 action。 当 某 个 action 触发 后 ，saga 可 以 
使 用 call、fetch 等 API 方法 发 起 异步 操作 ,操作 完成 后 使 用 put 函数 触发 action, 同步 更 新 state， 
从 而 完成 整个 state 的 更 新 。 

在 redux-saga 中 ， 所 有 的 任务 都 必须 通用 yield effect 来 完成 ， 例 如 : 


import { call, put, select , take} from 'redux-saga/effects'; 


function* mySaga() { 
yield takeEvery ("USER FETCH REQUESTED", fetchUser); 
} 


redux-saga 中 定义 了 effect，effect 本 质 就 是 一 个 特定 的 函数 ， 返 回 的 是 纯 文本 对 象 。 也 就 
是 说 ,通过 effect 函数 会 返回 一 个 字符 串 ，saga-middleware 根据 这 个 字符 串 来 执行 真正 的 异步 
操作 。redux-saga 常见 的 effect 有 call、put、select、takeEvery、takeLatest、take、all 等 。 

redux-saga 中 使 用 call 用 来 调用 异步 函数 ， 将 异步 函数 和 函数 参数 作为 call 函数 的 参数 传 
入 ， 最 终 该 函数 返回 一 个 对 象 。call 方法 的 主要 作用 是 方便 测试 ， 同 时 也 能 让 我 们 的 项 目 代码 
更 加 规范 化 。 同 JavaScript 原生 的 call 方法 类 似 ，call 函数 也 可 以 指定 this 对 象 ， 只 需要 把 this 
对 象 当 第 一 个 参数 传 入 call 方法 即 可 。saga 同样 提供 apply 函数 ， 作 用 同 call 一 样 ， 参 数 形式 
同 JavaScript 原生 apply 方法 。 


import { call, put, select , take} from 'redux-saga/effects'; 


export function* getAdData(url) { 
yield put ({type: START FETCH}); 
yield delay (delayTime); 
try { 
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return yield call (get,url); 
} catch (error) { 

yield put ({type: FETCH ERROR}) 
}finally { 

yield put({type: FETCH END}) 


} 
// 异步 获取 数据 方法 
export function* getAdDataFlow() { 
while (true){ 
let request = yield take (GET AD); 
let response = yield call (getAdData, url); 
yield put ({type: GET AD RESULT DATA, data:response.data}) 


} 
在 redux-saga 中 使 用 put 触发 action"， 其 作用 类 似 于 react 中 的 dispatch: 


import { call, put, select , take} from 'redux-saga/effects'; 
// 异步 获取 用 户 信息 
function* fetchUser (action) { 
Const user = 'test'; 
Bry 
// const user = yield call (Api.fetchUser, action.payload.userId); 
yield put ({type: "USER_ FETCH SUCCEEDED", user: user}); 
} catch (e) { 
yield put ({type: "USER FETCH FAILED", message: e.message}); 


’ 
redux-saga 中 的 select 方法 的 作用 与 getState 的 作用 类 似 : 
import { call, put, select , take} from 'redux-saga/effects'; 


// 加 载 用 户 信息 


export function* loadUserInfo() { 
try { 
yield take ('FETCH USER SUCCESS'); 


const user = yield select (getUserFromSstate); 
yield put ({type: "FETCH_DEPARTURE3 SUCCESS', departure}); 


} catch (error) { 
yield put ({type: "FETCH FAILED', error: error.message}); 
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} 
takeEvery 用 来 监听 action， 每 个 action 都 触发 一 次 ， 如 果 其 对 应 的 是 异步 操作 ， 那 么 每 次 
都 会 发 起 异步 请 求 ， 而 不 论 上 次 的 请 求 是 否 返回 ， 例 如 : 


import { call, put, select , take} from 'redux-saga/effects'; 


function* mySaga() { 
yield takeEvery ("USER FETCH REQUESTED", fetchUser); 
} 
与 takeEvery 相对 应 的 方法 有 takeLatest。takeLatest 的 作用 与 takeEvery 一 样 ， 唯一 的 区 别 
是 它 只 关注 最 后 一 次 , 也 就 是 最 近 一 次 发 起 的 异步 请 求 , 如 果 上 次 请 求 还 未 返回 , 就 会 被 取消 。 
使 用 示例 : 


import { call, put, select , take} from 'redux-saga/effects'; 


function* watchFetchData() { 
yield takeLatest ('FETCH REQUESTED', fetchData) 
} 


take 的 表现 与 takeEvery 一 样 ， 都 是 监听 某 个 action， 但 与 takeEvery 不 同 的 是 ，take 不 是 
每 次 action 触发 的 时 候 都 响应 ,而 只 是 在 执行 顺序 执行 到 take 语句 时 才 会 响应 action。 也 就 是 
说 ,take 只 有 在 执行 流 达到 时 才 会 响应 对 应 的 action, 而 takeEvery 则 一 经 注册 ,就 会 响应 action。 
当 在 genetator 中 使 用 take 语句 等 待 action 时 ，generator 被 阻塞 ， 等 待 action 被 分 发 ， 然 后 继 
续 往 下 执行 。 而 takeEvery 只 是 监听 每 个 action, 然后 执行 处 理 函数 。 对 于 何 时 响应 action 和 如 
何 响应 action，takeEvery 并 没有 控制 权 。 而 使 用 take 则 不 一 样 ， 我 们 可 以 在 generator 函数 中 
决定 何 时 响应 一 个 action， 以 及 一 个 action 被 触发 后 做 什么 操作 ， 例 如 : 


import { call, put, select , take} from 'redux-saga/effects'; 


export function* getAdDataFlow() { 
while (true){ 
let request = yield take (homeActionTypes.GET AD); 
let response = yield call (getAdData, request .url); 
yield 
put ({type:homeActionTypes.GET AD RESULT DATA,data:response.data}) 
} 
} 


all 提供 了 一 种 并 行 执行 异步 请 求 的 方式 .之 前 介绍 过 执行 异步 请 求 的 api 中 大 都 是 阻塞 执 
行 ， 只 有 当 一 个 call 操作 放 回 后 ， 才 能 执行 下 一 个 call 操作 。call 提供 了 一 种 类 似 Promise 中 
的 all 操作 , 可 以 将 多 个 异步 操作 作为 参数 传 入 all 函数 中 , 如 果 其 中 有 一 个 call 操作 失败 或 者 
所 有 call 操作 都 成 功 返 回 ， 则 本 次 all 操作 执行 完毕 ， 示 例如 下 : 
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import { all, call } from "redux-saga/effects' 


// correct, effects will get executed in parallel 
const [users, repos] = yield all([ 

call (fetch, '/users'), 

call (fetch, '/repos') 
]) 


redux-saga 集中 处 理 了 所 有 的 异步 操作 ， 项 目 中 的 异步 接口 非常 清晰 。 在 redux-saga 中 的 
action 是 普通 对 象 , 与 Redux 中 同步 的 action 完全 一 致 , 通过 worker 和 watcher 可 以 实现 非 阻 
塞 异步 调用 ,并且 同 时 可 以 实现 非 阻塞 调用 下 的 事件 监听 ,异步 操作 的 流程 是 可 以 控制 的 ， 可 
以 随时 取消 相应 的 异步 操作 。 


Redux 进 阶 


7.4.1 理解 middleware 原理 


Redux 主要 输出 createStore、combineReducers、bindActionCreators、applyMiddleware、 
compose 五 个 接口 。 本 节 中 ， 我 们 重点 讨论 middleware 的 核心 原理 。 

Redux 的 核心 是 控制 和 管理 所 有 的 数据 输入 与 输出 ， 使 用 纯 函 数 dispatch 派发 action 来 更 
改 数据 ， 其 功能 简单 且 固定 。middleware 允许 我 们 dispatch 一 个 action 之 后 ， 在 到 达 reducer 
之 前 先 做 一 些 额外 的 处 理 ， 可 以 理解 为 每 一 个 middleware 都 在 增强 dispatch 的 功能 。 

例如 ， 当 需要 记录 每 次 dispatch 的 action 时 ， 最 简单 的 方法 是 在 每 次 dispatch 之 前 直接 加 
上 log 日 志 ， 代 码 如 下 : 

let action = RDD('27)7 

console.log('dispatch', action); 


// 触发 事件 


store.dispatch (action); 


console.log('next state', store.getstate()) 
为 了 方便 在 项 目 中 多 处 使 用 ， 可 封装 成 统一 的 函数 方法 : 


export default function markDispatch (store, action) { 
console.log('dispatch', action); 
store.dispatch (action); 
console.log('next state', store.getstate()) 

} 


然后 在 需要 使 用 的 地 方 引入 该 方法 ， 并 使 用 markDispatch 蔡 换 原 有 的 dispatch: 
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import markDispatch from './utils' 


但 是 我 们 并 不 想 每 次 用 的 时 候 都 import 这 个 函数 ， 所 以 我 们 需要 使 用 新 方法 直接 蔡 代 
dispatch: 


const next = store.dispatch; 
store.dispatch = function (action) { 
let action = ADD ('2°'); 
console.log('dispatch', action); 
next (action) 
console.log('next state', store.getstate()) 
} 


这 样 我 们 在 用 dispatch 的 时 候 就 自动 附带 了 使 用 console.log 记录 action 和 next state 的 功 
能 ， 这 里 每 一 个 附带 上 的 功能 就 是 一 个 middleware， 都 是 用 来 增强 dispatch 作用 的 。 

我 们 进一步 思考 如 何 实 现 多 个 middleware 的 串联 顺序 执行 。 例 如 ， 在 每 次 dispatch 时 记 
录 action 和 next state 的 基础 上 ， 也 需要 记录 每 次 dispatch 错误 的 原因 ， 那 么 执行 的 顺序 是 
dispatch 一 markDispatch 一 reportDispatchError, 后 面 的 中 间 件 需要 接收 到 前 面 改造 后 的 dispatch。 

首先 ， 对 dispatch 记录 函数 进行 改造 


function markDispatch (store) { 


let next = store.dispatch; 

store.dispatch = dispatchAndLog(action) => { 
console.1log('dispatching', action); 
let result = next (action); 
console.log('next state', store.getstate()); 
return result; 

} 

} 


直接 返回 result 函数 ， 可 以 在 后 面 实 现 一 个 链 式 调用 。 继 续 改 造 ， 让 每 一 个 中 间 件 函数 接 
收 一 个 dispatch， 然 后 返回 一 个 改造 后 的 dispatch 来 作为 下 一 个 中 间 件 函数 的 next: 


const markDispatch = store => next => action => { 
console.log('dispatching', action) 
return next (action) 

} 


类 似 的 ， 我 们 继续 封装 一 个 记录 报错 函数 : 


function reportDispatchError(store) { 
let next = store.dispatch; 
store.dispatch = (action) => { 
try { 
return next (action); 


} catch (err) { 


1 元 
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console.error('Caught an exception!', err); 
Goldlog.record(err, { 
extra: { 
action, 
state: store.getstate(); 
} 
}) 
throw err; 


} 
改造 后 : 
const reportDispatchError = store => next => action => { 
try { 
return next (action) 
} catch (err) { 
console.error('Caught an exception!', err); 
Goldlog.record(err, { 
extra: { 
action, 
state: store.getstate(); 
1 


}) 
throw err; 


} 


接着 ， 我 们 改造 一 下 applyMiddleware， 接 收 一 个 middlewares 数组 : 


export default function applyMiddleware (middlewares) { 
middlewares = middlewares.slice() 
middlewares.reverse() 


let dispatch = store.dispatch 
middlewares.forEach (middleware => 
dispatch = middleware (store) (dispatch) 
) 
return Object.assign({}, store, { dispatch }) 
} 


查看 Redux 中 applyMiddleware 的 源码 ， 基 本 上 类 似 于 下 面 的 情况 : 


export default function compose(...funcs) { 
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if (funcs.length === 0) { 


return arg => arg 


if (funcs.length === 1) { 
return funcs[0] 


return funcs.reduce((a, b) => (...args) => a(lb(...args))) 


// 可 以 看 出 compose 的 作用 是 上 一 个 函数 的 返回 结果 作为 下 一 个 函数 的 参数 传 入 
export default function applyMiddleware(...middlewares) { 
// 可 以 这 么 做 是 因为 在 creatstore 里 ， 当 发 现 enhancer 是 一 个 函数 的 时 候 


// 会 直接 return enhancer (createStore) (reducer, preloadedstate) 


return (CreateStore) => (...args) => { 
// 之 后 就 在 这 里 先 建立 一 个 store 
const store = CreateStore (.. .args) 
let dispatch = store.dispatch 
let chain = [] 
// 将 getstate 跟 dispatch 函数 暴露 出 去 
const middlewareAPI = { 
getstate: store.getstate, 
dispatch: (...args) => dispatch(...args) 
} 
// 这 里 返回 chain 的 一 个 数组 ， 里 面 装 的 是 wrapDispatchToAddLogging 那 一 层 
// 相当 于 先 给 middle 预 处 理 ， 接 下 来 只 需要 开始 传 入 dispatch 即 可 


chain = middlewares.map (middleware => middleware (middlewareAPI)) 


dispatch = compose(...chain) (store.dispatch) 
// wrapCrashReport (wrapDispatchToAddLogging (store.dispatch)) 
// 此 时 返回 了 上 一 个 dispatch 的 函数 作为 wrapCrashReport 的 next 参数 
// wrapCrashReport (dispatchAndLog) 
// 最 后 返回 最 终 的 dispatch 
return { 

...Store, 

dispatch 


y 


+ 中...middleware (arguments) 遵循 Redux middleware API 的 函数 。 每 个 middleware 接受 
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Store 的 dispatch 和 getState 函数 作为 命名 参数 ,并 返回 
的 下 一 个 middleware 的 dispatch 方法 , 并 返回 一 个 接收 action 的 新 函数 , 这 个 函数 可 以 直接 调 
外， 甚至 根本 不 去 调用 它 。 调 用 链 中 最 后 一 个 
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next(action)， 或 者 在 其 他 需要 的 时 刻 调 上 
middleware 会 接受 真实 的 store 的 dispatch 方法 作为 next 参数 ， 并 借 此 结束 调 | 


middleware 的 函数 是 ({ getState, dispatch }) => next => action。 


7.4.2 手动 实现 middleware 
7.4.1 小 节 中 介绍 了 applyMiddleware 的 基本 原理 ， 了 解 到 middleware 的 函数 形式 是 


({ getState, dispatch }) => next => action， 本 小 节 我 们 实现 自 定义 中 间 件 。 


import { createstore, applyMiddleware } from 'redux' 


import count from './reducers’' 
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function logger({ getState }) { 
return next => action => { 


console.1log('will dispatch', action) 


// 调用 middleware 链 中 下 一 个 middleware 的 dispatch 


let returnValue = next (action) 


console.log('state after dispatch', getstate()) 


// 一 般 会 是 action 本 身 ， 除 非 后 面 的 middleware 修改 了 它 


return returnValue 


let store = createStore ( 
count, 
['ADD'], 
applyMiddleware (logger) 


store.dispatch({ 
type: 'SUM' 
text: 

}) 

// 将 打印 如 下 信息 

// will dispatch: { type: 

// state after dispatch: 


” perform sum.." 


'SUM', 
[0 


text: "perform sum..' } 


"perform add..." ] 


一 个 函数 。 该 函数 会 被 传 入 被 称 为 next 


链 。 所 以 ， 
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React 不 仅仅 是 一 个 库 , 也 不 是 一 个 框架 , 而 是 一 个 庞大 的 生态 体系 。 若 希望 充分 使 用 React 
尽 可 能 多 的 特性 , 整个 技术 栈 都 要 相应 地 配合 改造 , 则 我 们 要 学 习 从 后 端 到 前 端的 一 整套 解决 
方案 。 因 此 ， 使 用 React 时 ， 合 理 的 选择 是 采用 React 的 整个 技术 栈 。 本 章 将 开始 详细 分 析 如 
何 搭建 一 个 React 应 用 架构 ， 所 以 本 章 的 例子 希望 读者 使 用 WebStrom 创建 ， 或 者 使 用 脚手架 
创建 ， 不 再 直接 使 用 <script></script> 引 入 React。 


文件 结构 


本 节 采 用 React+Redux+React-Router+LesstES6+webpack 介绍 React 实现 一 个 完整 应 用 的 
文件 结构 。React 的 CLI 脚手架 工具 create-react-app 屏蔽 了 和 React 无 关 的 配置 ， 如 Babel、 
webpack。 下 面 我 们 使 用 这 个 工具 快速 创建 一 个 项 目 。 


【示例 8-1 文件 结构 演示 】 
用 npm 安装 一 个 全 局 的 create-react-app〈( 如 果 前 面 没 有 安装 过 ) : 
npm install -g create-react-app 
然后 运行 : 
create-react-app hello-world 


初始 化 了 一 份 React 项 目 ， 只 要 运行 npm run start 就 能 启动 开发 服务 器 了 。 例 如 : 


上 一 sro # 开 发 目录 


| 

| 一 一 actions #action 的 文件 
| 

| 一 一 components 辩 展示 组 件 


| 
| 一 一 containers # 容 器 组 件 ,主页 
ll 
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上 一 一 
上 一 一 
上 一 一 
上 一 一 
二 一 一 
上 一 一 
上 一 一 


| 一 一 ALert ## 业 务 组 件 
| 
| 一 一 Notification ## 业 务 组 件 
| 
一 一 reducers #reducer 文件 
一 static # 静 态 文件 
一 一 store #store 配置 文件 
—— utils # 工 具 文件 
一 index.less 才 样式 文件 
上 一 一 index.js 才 入 口 文件 
public # 发 布 目录 
node modules # 包 文件 夹 
.gitignore 
.jshintrc 
webpack.production.config.js ## 生 产 环境 配置 
webpack.config.js #webpack 配置 文件 
package.json # 环 境 配 置 
README .md # 使 用 说 明 


首先 ， 以 功能 为 目录 。 将 components、containers、stores 按 其 功能 放 在 一 个 目录 内 ， 将 组 
件 都 放 在 components 目录 内 ，containers 则 是 组 装 component。 

其 次 ， 组 件 扁平 化 结构 。 例 如 ， 可 以 将 所 有 的 组 件 都 放 在 components 目录 ， 这 种 适合 简 
单 组 件 少 或 者 比较 单一 的 情况 。 

最 后 ， 以 组 件 为 目录 。 组 件 内 需要 的 文件 放 在 同一 个 目录 下 ， 例 如 Alert 和 Notification 
可 以 建 两 个 目录 ， 目 录 内 部 有 代码 、 样 式 和 测试 用 例 。 


CSS 方案 


8.2.1 CSS Modules 

CSS 的 全 称 是 Cascading Style Sheets， 即 层 倒 样式 表 ， 是 网 页 样式 的 一 种 描述 方法 。CSS 
为 HTML 标记 语言 提供 了 一 种 样式 描述 ， 定 义 了 其 中 元 素 的 显示 方式 。 严 格 来 讲 ，CSS 不 能 
算是 一 种 编程 语言 ， 由 于 ES2015/2016 的 快速 普及 和 Babel/webpack 等 工具 的 迅猛 发 展 ，CSS 
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的 发 展 显得 非常 缓慢 , 逐渐 成 为 大 型 项 目 工程 化 的 痛 点 , 变 成 前 端 走向 彻底 模块 化 前 必须 解决 
的 难题 。 不 论 是 用 jQuery 还 是 React 开发 ， 都 会 遇 到 一 系列 的 CSS 问题 : 
全 局 污染 
命名 混乱 


eee e e@ 
2 
Re 
小 


为 了 让 CSS 也 能 适用 软件 工程 方法 解决 上 述 列举 的 问题 ， 从 近 些 年 的 发 展 过 程 中 可 以 发 
现 CSS 预 处 理 器 (例如 Less、SASS) 在 尽 可 能 地 使 CSS 像 一 门 编程 语言 ， 但 是 始终 没有 解 
决 CSS 模块 化 的 问题 。 

第 一 类 CSS 模块 化 的 解决 方案 是 彻底 抛弃 CSS, 使 用 JavaScript 或 JSON 来 写 样式 。 这 种 
做 法 能 够 给 CSS 提供 JavaScript 同样 强大 的 模块 化 能 力 ， 但 是 使 用 JavaScript 或 JSON 不 能 利 
用 成 熟 的 CSS 预 处 理 器 SASS/Less 等 ， 同 时 :hover 和 :active 伪 类 处 理 起 来 复杂 。 

另 一 类 CSS 模块 化 解决 方案 即 CSS Modules。CSS Modules 不 是 将 CSS 改造 成 编程 语言 ， 
而 是 最 大 化 地 结合 现 有 CSS 生态 和 JavaScript 模块 化 能 力 ， 依 旧 使 用 CSS， 但 同时 使 用 
JavaScript 来 管理 样式 依赖 ， 加 入 了 局 部 作用 域 和 模块 依赖 。 因 此 ，CSS Modules 很 容易 学 ， 

使 用 较 少 的 规则 实现 网 页 组 件 最 需要 的 功能 ,最 重要 的 是 可 以 保证 某 个 组 件 的 样式 不 会 影响 到 
其 他 组 件 。CSS Modules 是 一 种 非常 优秀 的 模块 化 解决 方案 。CSS Modules 发 布 时 依旧 编译 出 
单独 的 JavaScript 和 CSS。 它 并 不 依赖 于 React， 使 用 webpack 可 以 在 Vue/AngularjQuery 中 
使 用 。 


8.2.2 局 部 样式 


CSS 的 规则 默认 都 是 全 局 的 ， 任 何 一 个 组 件 的 样式 规则 都 对 整个 页 面 有 效 。CSS Modules 
产生 局 部 作用 域 的 唯一 方法 就 是 使 用 一 个 独一无二 的 class 的 名 字 ， 不 会 与 其 他 选择 器 重 名 。 
例如 ， 编 写 一 个 React 组 件 ， 如 示例 8-2 所 示 。 

【示例 8-2 React 组 件 】 


import React from 'react'; 


import style from './App.css'; 


export default () => { 
return ( 
<div className={style.wrapper}> 
<hl className={style.title}> 
Hello World 
</h1> 
<h2 className={style.title}> 
CSS Modules 
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在 引入 的 index.css 样式 文件 中 编写 样式 表 : 


在 webpack.configjs 中 配置 css-loader 启用 CSS Modules: 


] 7 
加 上 modules 即 为 启用 ， 


本 示例 中 我 们 自 定义 的 编译 规则 生成 的 HTML 是 : 
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localIdentName 用 于 设置 生成 样式 的 命名 规则 。css-loader 默认 
的 哈 希 算法 是 [hash:base64]， 这 会 将 .title 编译 成 .3zyde4llyATCOkgn-DBWEL 这 样 的 字符 串 。 


<div data-reactroot=" class="App wrapper-2N-z0"> 
<hl class="App title-3zyde">Hello World</h1> 
<h2 class="App subTitle-A vr9">CSS Modules</h2> 


</div> 
App.css 也 会 同时 被 编译 : 


. App_ wrapper-2N-zO { 
width: 750px; 
margin: 0 auto 


- App_ title-3zyde { 
color: red; 


font-size: 48px 


. App subTitle-A vr9 { 
Color: green; 
font-size: 36px 

} 


CSS Modules 对 CSS 中 的 class 名 都 做 了 处 理 ， 使 
对 应 关系 : 


七 .Iocals={ 
wrapper:" App_wrapper-2N-z0O ", 
title:" App title-3zyde ", 
"sub-title":" App subTitle-A vr9" 
} 


上 


对 象 来 保存 原 class 和 混淆 后 class 的 


注意 ，App_ wrapper-2N-zO、App__title-3zyde、App_ subTitle-A_vr9 是 CSS Modules 按 
照 localIdentName 自动 生成 的 class 名 。 其 中 的 3zyde411yYATCOKksgn 是 按照 给 定 算法 生成 的 序 
列 码 。 经 过 这 样 混淆 处 理 后 ，class 名 基本 就 是 唯一 的 ， 大 大 降低 了 项 目 中 样式 覆盖 的 概率 。 
同时 在 生产 环境 下 修改 规则 ， 生 成 更 短 的 class 名 ， 可 以 提高 CSS 的 压缩 率 。 

通过 这 些 处 理 ，CSS Modules 可 以 继续 使 用 CSS 编写 样式 ， 相 当 于 给 每 个 class 名 外 加 了 
一 个 :local， 使 得 所 有 样式 都 是 局 部 样式 ， 以 此 来 实现 样式 的 局 部 化 ， 解 决 了 命名 冲突 和 全 局 


污染 问题 。 
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8.2.3 全 局 作用 域 
CSS Modules 还 允许 使 用 :global(.className) 的 语法 ， 声 明 一 个 全 局 规则 。 凡 是 这 样 声 明 
的 class， 都 不 会 被 编译 成 哈 希 字 符 串 。 例 如 : 


-normal { 


color: green; 
} 


/* 以 上 与 下 面 等 价 */ 
:local(.normal) { 
color: green; 

} 


/* 定义 全 局 样式 */ 
:global(.btn) { 
color: red; 


/* 定义 多 个 全 局 样式 */ 
:global { 
bink Tt 
color: green; 
} 
-box { 
color: yellow; 
} 
} 


8.2.4 组 合 样式 
在 CSS Modules 中 , 一 个 选择 器 可 以 继承 另 一 个 选择 器 的 规则 , 称 为 “组 合 ”。 在 App.css 
示例 中 ， 让 .title 继承 .titleBase， 组 件 代码 保持 不 变 ， 如 示例 8-3 所 示 。 


【示例 8-3 组合 样式 】 


import React from 'react'; 


import style from './App.css'; 


export default () => { 
return ( 
<div className={style.wrapper}> 
<hl className={style.title}> 
Hello World 
</h1> 
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针对 App.css 样式 代码 ， 我 们 做 如 下 修改 : 


运行 编译 之 后 ， 生 成 如 下 HTML 代码 : 


App.css 编译 成 下 面 的 代码 : 
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background-color: blue 


-_34yD SgZCcBTCRJYYSVXT7E { 
width: 750px; 


margin: 0 auto 


-2DHwuiHWMnKTOYG45TOx34 { 
color: red; 
font-size: 48px 


.O09HlhYQw4ds2 DiaeH9cz { 
Color: green; 
font-size: 36px 

} 


原 class 与 编译 后 的 class 对 应 关系 如 下 : 


t.locals={ 
base:" 22nto06juypAOUlgUkLjvV", 
wrapper:" 34YD_SgZcBTCRJYYSVxT7E 22nt006juypAOU1lgUkLjvV", 
title:" 2DHwuiHWMnKTOYG45T0x34 22nto06juypAOUlgUkLjvV", 
subTitle:"O9H1lhYQw4ds2 DiaeH9cz" 

} 


由 于 在 .title 中 组 合 了 .base， 编 译 后 title 会 变 成 两 个 class。 选 择 器 也 可 以 继承 其 他 CSS 文 
件 里 面 的 规则 : 


/* settings.css */ 


.Primary-color { 
color: #f£40; 


/* components/App.css */ 


.base { /* 通用 的 样式 */ } 


Eitle + 
composes: base; 
composes: primary-color from './settings.css'; 
/* 其 他 样式 */ 

} 


对 于 大 多 数 项 目 ， 有 了 composes 后 已 经 不 再 需要 SASS/Less/PostCSS。 由 于 composes 不 


128 


第 8 章 React 架构 


是 标准 的 CSS 语法 ， 因 此 编译 时 会 报错 ， 如 果 希 望 在 项 目 中 使 用 CSS 预 处 理 器 ， 就 只 能 使 用 
预 处 理 器 自己 的 语法 来 做 样式 复 用 了 。 

CSS Modules 很 好 地 解决 了 CSS 目前 面临 的 模块 化 难题 ， 支 持 与 SASS/Less/PostCSS 等 
搭配 使 用 ,能 充分 利用 现 有 技术 积累 。 同 时 也 能 和 全 局 样式 灵活 搭配 , 便于 项 目 中 逐步 迁移 至 
CSS Modules。CSS Modules 的 实现 也 属于 轻 量 级 ， 未 来 有 标准 解决 方案 后 可 以 低 成 本 迁移 。 


8.2.5 PostCSS 


PostCSS 是 一 款 对 CSS 进行 处 理 的 工具 ， 主 要 依赖 插件 来 进行 操作 。 当 我 们 需要 某 些 功 
能 的 时 候 ， 只 需 配 置 相 应 的 插件 即 可 。PostCSS 有 非常 丰富 的 插件 ， 可 以 涵盖 开发 过 程 的 各 个 
方面 。 即 使 没有 满足 项 目 需要 的 插件 ,开发 者 也 可 以 使 用 JavaScript 来 开发 自己 的 插件 .PostCSS 
是 一 个 利用 JavaScript 插件 来 对 CSS 进行 转换 的 工具 ， 较 常 使 用 的 插件 有 CSS Modules、 


Autoprefixer、postcss-cssnext 等 。 


1. CSS Modules 
在 CSS Modules 中 支持 使 用 变量 ， 需 要 安装 PostCSS 和 postcss-modules-values: 


npm install --save postcss-loader postcss-modules-values 


【示例 8-4 CSS Modules】 
在 webpack.config.js 中 增加 postcss-loader 配置 : 


var values = require('postcss-modules-values'); 


module.exports = { 


entry: _ dirname + '/index.js', 
outputs. tt 
publicPath: '/', 
filename: './bundle.js' 
}, 
module: { 
loaders: [ 


{ 
tests /Ne jsx2sy, 
exclude: /node modules/, 
loader: 'babel', 
query: { 
presets: ['es2015', 'stage-0', 'react'] 
} 
}, 
{ 
test: /\.css$/, 


loader: "style-loader!css-loader?modules!postcss-loader" 
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ys 
] 
]} v 
Bostess ltl 
values 
] 
] 7 


在 colors.css 里 面 定义 变量 : 


@value blue: #0c77f8; 
@value red: #ff0000; 
@value green: #aaf200; 


在 App.css 中 引用 这 些 变量 : 


evalue colors: "./colors.css"; 


@value blue, red, green from colors; 


title 二 
color: red; 


background-color: blue; 
} 


2. Autoprefixer 


针对 浏览 器 兼容 的 处 理 可 以 使 用 Autoprefixer 插件 。Autoprefixer 是 一 个 根据 Can I Use 
(http://caniuse.com) 兼容 性 解析 CSS， 然 后 为 其 添加 浏览 器 厂商 前 缀 的 PostCSS 插件 。 不 加 
任何 vender prefix 的 通常 写法 ， 例 如 : 
: :example{ 
display: none; 
position:relative; 


transform: translate(10, 10); 
| 


Autoprefixer 将 使 用 基于 当前 浏览 器 支持 的 特性 和 属性 数据 来 添加 前 级 ， 


-example { 


处 理 之 后 生成 : 


display: none; 

position: relative; 
—webkit-transform: translate(10, 10); 
-ms-transform: translate(10, 10); 


transform: translate(10, 10); 


display、position 属性 没有 浏览 器 差异 ， 已 经 完全 符合 W3C 标准 的 CSS 2.1 属性 ， 
Autoprefixer 不 会 为 其 加 前 级 。 针 对 CSS3 属性 ，transform 会 为 其 加 前 级 : --webkit 是 Chrome 
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和 Safari 前 级 ; --ms 则 是 正 浏览 器 的 前 级 ; 而 Firefox 由 于 已 经 实现 了 对 transform 的 W3C 标 


准 化 ， 因 此 直接 使 用 transform 即 可 。 


3. postcss-cssnext 
直接 来 看 一 个 示例 。 


【示例 8-5 postcss-cssnext】 


:root { 
=--EontSize: lrem; 
--mainColor: #12345678; 
--centered: { 
display: flex; 
align-items: center; 
justify-content: center; 


} 
body { 
color: var(--mainColor); 
font-size: var(--fontsize); 
line-height: calc(var(--fontSize) * 1.5); 
padding: calc((var(--fontsize) / 2) + lpx); 
} 
.Centered { 
@apply --centered; 
} 


通过 postcss-cssnext 处 理 之 后 : 


body { 
colors rgba(187 52, /96r 0=47059)s 
font-size: 16px; 
font-size: lrem; 
line-height: 24px; 
line-height: 1.5rem; 
padding: calc(0.5rem + lpx); 
} 
-Centered { 
display: -webkit-box; 
display: -ms-flexbox; 
display: flex; 
—webkit-box-align: center; 
-ms-flex-align: center; 
align-items: center; 


—webkit-box-pack: center; 


131 


React.js 实战 


-ms-flex-pack: center; 
justify-content: center; 
} 


通过 var0 和 calc0 进 行 CSS 属性 值 的 计算 ， 也 有 @apply 这 样 的 应 用 大 段 规则 的 写法 ， 可 
以 借 此 去 了 解 一 些 新 的 CSS 草案 特性 .postcss-cssnext 正在 尝试 将 CSS 变 为 一 种 可 以 进行 逻辑 
处 理 的 语言 。 


_ 
多 


池 ”状态 管理 


8.3.1 如 何 定义 state 


定义 一 个 合适 的 state 是 正确 创建 组 件 的 第 一 步 。state 必须 能 代表 一 个 组 件 UI 呈现 的 完整 
状态 集 ， 即 组 件 的 任何 UI 改变 都 可 以 从 state 的 变化 中 反映 出 来 ; 同时 ，state 还 必须 是 代表 一 
个 组 件 UI 呈现 的 最 小 状态 集 ， 即 state 中 的 所 有 状态 都 是 用 于 反映 组 件 UI 变化 的 ， 没 有 任何 
多 余 的 状态 ， 也 不 需要 通过 其 他 状态 计算 而 来 的 中 间 状 态 。 
组 件 中 用 到 的 一 个 变量 是 不 是 应 该 作为 组 件 state， 可 以 通过 下 面 的 4 条 依据 进行 判断 : 
@ ”这 个 变量 是 否 是 通过 Props 从 父 组 件 中 获取 ? 如 果 是 ， 那 么 它 不 是 一 个 状态 。 
@ ”这 个 变量 是 否 在 组 件 的 整个 生命 周期 中 都 保持 不 变 ? 如 果 是 ， 那 么 它 不 是 一 个 状态 。 
@ ”这 个 变量 是 否 可 以 通过 其 他 状态 (state ) 或 者 属性 (Props ) 计算 得 到 ? 如 果 是 ， 那 
么 它 不 是 一 个 状态 。 
@ 这 个 变量 是 否 在 组 件 的 render 方法 中 使 用 ? 如 果 不 是 ， 那 么 它 不 是 一 个 状态 。 
情况 下 ,这 个 变量 更 适合 定义 为 组 件 的 一 个 普通 属性 , 例如 组 件 中 用 到 的 定时 器 ,高 
应 该 直接 定义 为 this.timer， 而 不 是 this.state.timer。 


当然 , 并 不 是 组 件 中 用 到 的 所 有 变量 都 是 组 件 的 状态 ! 当 存 在 多 个 组 件 共同 依赖 一 个 状态 
一 般 的 做 法 是 状态 上 移 ， 将 这 个 状态 放 到 这 几 个 组 件 的 公共 父 组 件 中 。 


各 


8.3.2 ”你 可 能 不 需要 Redux 

在 项 目 中 使 用 Redux 不 是 必需 的 ， 在 以 下 几 种 情况 下 可 能 根本 不 需要 Redux: 

@ 项 目 中 已 经 有 一 个 预先 定义 的 方式 来 共享 和 安排 组 件 状 态 。 

@ ”应 用 程序 只 包含 大 部 分 简单 的 操作 (如 UI 更 改 ) ， 则 这 些 操作 并 不 一 定 是 Redux 存 

储 的 一 部 分 ， 可 以 在 组 件 级 别 进行 处 理 。 

@ 不 需要 管理 服务 器 端 事件 ( SSE )、 不 需要 与 服务 器 大 量 交 互 , 也 没有 使 用 websockets。 
@ ”可 以 从 每 个 视图 的 单个 数据 源 获取 数据 。 
的 


， 可 以 借用 “如 果 你 不 知道 是 否 需 要 Redux, 那 就 是 不 需要 它 ” 这 句 话 来 概括 。Redux 
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鸭 创 造 者 DanAbramov 又 补充 了 一 句 :“ 只 有 过 到 React 实 在 解决 不 了 的 问题 ,你 才 需 要 Redux。” 
从 应 用 的 角度 考虑 ，Redux 的 适用 场景 是 : 多 交互 、 多 数据 源 。 从 组 件 的 角度 考虑 ，Redux 适 
用 于 如 下 场景 : 

@ 茶 个 组 件 的 状态 需要 共享 。 

@ 某 个 状态 需要 在 任何 地 方 都 可 以 拿 到 。 

@ ”一 个 组 件 需要 改变 全 局 状态 。 

@ 一 个 组 件 需 要 改变 另 一 个 组 件 的 状态 。 


换 句 话说 ，Redux 不 是 必需 的 ，Redux 只 是 Web 架构 中 管理 状态 (变化 和 异步 ) 的 一 种 
解决 方案 ， 也 可 以 选择 其 他 方案 。 


8.3.3 ”再 来 说 说 Redux 


随 着 JavaScript 单 页 应 用 开发 日 趋 复 杂 ，JavaScript 在 项 目 中 需要 管理 更 多 state (状态 ) 。 
这 些 state 可 能 包括 服务 器 响应 、 缓 存 数据 、 本 地 生成 尚未 持久 化 到 服务 器 的 数据 ， 也 包括 UI 
状态 ， 如 激活 的 路 由 、 被 选中 的 标签 、 是 否 显示 加 载 动 效 或 者 分 页 器 等 。 

管理 不 断 变化 的 state 非常 困难 。 如 果 一 个 model 的 变化 会 引起 另 一 个 model 变化 ， 那 么 
当 view 变化 时 ， 就 可 能 引起 对 应 model 以 及 另 一 个 model 的 变化 ， 依 次 地 可 能 会 引起 另 一 个 
view 的 变化 。 最 终 状 态 的 追溯 变 得 非常 复杂 ，state 在 什么 时 候 、 由 于 什么 原因 、 如 何 变化 已 
然 不 受 控制 。 当 系统 变 得 错综复杂 的 时 候 ， 想 重 现 问题 或 者 添加 新 功能 就 会 变 得 异常 复杂 ， 甚 
至 如 何 扩展 新 需求 ， 如 更 新 调 优 、 服 务 端 泻 染 、 路 由 跳 转 前 请 求 数据 等 都 是 前 所 未 有 的 复杂 性 
挑战 。 

React 只 是 DOM 的 一 个 抽象 层 ， 并 不 是 Web 应 用 的 完整 解决 方案 ， 有 两 个 方面 React 没 
涉及 : 


@ ”代码 结构 。 

@ ”组 件 之 间 的 通信 。 

在 Redux 出 现 之 前 ， 在 构建 复杂 任务 时 管理 状态 是 相当 痛苦 的 。 受 Flux 应 用 程序 设计 模 
式 的 启发 ，Redux 设计 用 于 管理 JavaScript 应 用 程序 中 的 数据 状态 。 虽 然 它 主要 用 于 React， 
但 是 可 以 使 用 Redux 与 不 同 的 框架 和 库 〈 如 jQuery、Angular 或 Vue) 。Redux 试图 使 用 三 个 
基本 原则 让 state 的 变化 变 得 可 预测 : 

@ 唯一 数据 源 。 

@ 保持 状态 只 读 。 

@ 数据 改变 只 能 通过 纯 函 数 来 完成 。 

Redux 确保 应 用 程序 的 每 个 组 件 都 可 以 直接 访问 应 用 程序 的 状态 ， 而 不 必 将 props 发 送 到 
子 组 件 ， 或 使 用 回调 函数 将 数据 发 送 回 父 组 件 。Redux 要 求 : 


@ 用 简单 的 对 象 和 数组 来 描述 应 用 状态 。 
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@ 用 简单 对 象 来 描述 应 用 中 的 变更 。 

@ 用 纯 函 数 来 描述 处 理 变 更 的 逻辑 。 

Redux 中 有 4 个 核心 概念 ， 分 别 是 store、state、action、reducer， 前 面 已 经 介绍 过 ， 这 是 
简单 复习 一 下 : 


@ store 指 的 是 存储 数据 的 仓库 ， 我 们 的 数据 只 有 放 在 这 里 才 可 以 被 Redux 管理 起 来 。 
Redux 提供 了 一 个 createStore 来 生成 store， 其 中 createStore 接收 一 个 reducers。 

@ state 指 的 是 初始 化 的 数据 ， 这 里 的 初始 化 数据 是 可 以 有 多 个 的 。 

@ action 指 的 是 需要 变化 的 数据 ， 必 须要 有 一 个 type 参数 和 一 些 需要 在 state 中 修改 的 
属性 。 

@ Ieducer 因为 store 在 收 到 我 们 传递 过 去 的 action 之 后 需要 对 state 进行 更 新 ,这 个 计算 
过 程 就 叫 作 reducer。reducer 是 一 个 函数 ， 接 受 state 和 action 作为 参数 ， 返 回 一 个 新 
的 state。 


Redux 提供 的 权衡 是 通过 增加 中 间 环 节 来 将 “发 生 了 什么 ”和 “该 如 何 变化 ”进行 解 耦 。 
例如 ， 从 组 件 中 将 reducer 抽出 : 


咖 


import React, { Component } from 'react'; 


const counter = (state = { value: 0 }, action) => { 
switch (action.type) { 

Case "INCREMENT ' : 
return { value: state.value + 1 }7 

Case "DECREMENT ' : 
return { value: state.value - 1 }; 

default: 
return state; 


class Counter extends Component { 
state = counter (undefined, {}); 


dispatch (action) { 
this .setState (PrevState => counter (PrevState，action) ) ; 
} 
// 递增 
increment = () => { 
this.dispatch({ type: 'INCREMENT' }) 7 
// 递减 
decrewent = {) => 


this.dispatch({ type: 'DECREMENT' }); 


134 


第 8 章 React 架构 
a 


render() { 
return ( 
<div> 
{this.state.value} 
<button onClick={this.increment}>+</button> 
<button onClick={this.decrement}>-</button> 
</div> 
} 
} 


长 关于 Redux 的 详细 介绍 请 阅读 第 7 章 。 | 


路 由 管理 


本 节 介 绍 React 体系 的 一 个 重要 部 分 : 路 由 管理 React-Router。React-Router 是 官方 维护 的 ， 
也 是 唯一 可 选 的 路 由 库 。React-Router 通过 管理 URL 实现 组 件 的 切换 和 状态 的 变化 ， 在 开发 
复杂 的 应 用 时 一 定 会 用 到 。 

React-Router 的 作用 是 让 UI 组 件 与 URL 保持 同步 , 在 项 目 中 可 以 通过 简单 的 API 实现 强 
大 的 特性 ， 例 如 代码 懒 加 载 、 动 态 路 由 匹配 、 路 径 过 渡 处 理 等 。 


【示例 8-6 React-Router】 
首先 ， 安 装 React-Router: 


npm install react-router --save 


Router 作为 一 个 React 组 件 ， 可 以 进行 演 染 : 


import { Router, Route, hashHistory } from 'react-router'; 


render(( 
<Router history={hashHistory}> 
<Route path="/" component={App}/> 
</Router> 
), document .getElementById('app')); 


Router 组 件 本 身 只 是 一 个 容器 ,真正 的 路 由 要 通过 Route 组 件 定义 。 这 里 使 用 了 hashHistory 


来 管理 路 由 历史 与 URL 的 哈 希 部 分 , 路 由 的 切换 由 URL 的 哈 希 变化 决定 , 即 URL 的 # 部 分 发 
生变 化 。 添 加 更 多 的 路 由 ， 并 指定 它们 对 应 的 组 件 : 
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import About from './modules/About" 


import Repos from './modules/Repos' 


render(( 
<Router history={hashHistory}> 
<Route path="/" component={App}/> 
<Route path="/repos" component={Repos}/> 
<Route path="/about" component={About}/> 
</Router> 
), document .getElementById('app')) 


用 户 访问 /repos 时 , 会 先 加 载 App 组 件 ， 然 后 在 它 的 内 部 再 加 载 Repos 组 件 。App 组 件 代 
码 示例 : 


export default React.createClass({ 


render() { 
return <div> 
{this.props.children} 
</div> 
} 
}) 


在 上 述 示 例 代码 中 ，App 组 件 的 this.props.children 属性 就 是 子 组 件 。 当 然 , 子路 由 也 可 以 
不 写 在 Router 组 件 里 面 ， 可 以 单独 传 入 Router 组件 的 routes 属性 ， 例 如 : 


let routes = <Route path="/" component={App}> 


<Route path="/repos" component={Repos}/> 
<Route path="/about" component={About}/> 
</Route>; 


<Router routes={routes} history={browserHistory}/> 


在 上 面 的 代码 中 ,访问 根 路 径 /， 不 会 加 载 任何 子 组 件 。 也 就 是 说 ，App 组 件 的 
this.props.children 这 时 是 undefined。 可 以 采用 {this.props.children | <Home/>} 这 种 写法 ， 但 是 
路 由 规则 不 清晰 。 因 此 可 以 改造 成 : 


<Router> 


<Route path="/" component={App}> 
{* 根 路 由 *} 
<IndexRoute component={Home}/> 
{Ty 
<Route path="accounts" component={Accounts}/> 
<Route path="statements" component={Statements}/> 
</Route> 
</Router> 
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IndexRoute 显 式 指定 Home 是 根 路 由 的 子 组 件 ， 即 指定 默认 情况 下 加 载 的 子 组 件 。 现 在 ， 


户 访问 /的 时 候 ， 加 载 的 组 件 结构 如 下 : 


<App> 
<Home/> 
</App> 


App 只 包含 下 级 组 件 的 共有 元 素 , 本 身 的 展示 内 容 则 由 Home 组 件 定义 。 这 样 既 有 利于 代 
码 分 离 ， 也 有 利于 使 用 React Router 提供 的 各 种 API。 
我 们 想 添加 一 个 导航 栏 ， 保 存在 于 每 个 页 面 上 上， 如果 没有 路 由 器 ， 就 需要 封装 一 个 nav 
组 件 ， 并 在 每 一 个 页 面 组 件 都 引用 和 演 染 。 随 着 应 用 程序 的 增长 ， 代 码 会 显得 很 元 余 。React 
Ronuter 提供 了 一 种 方式 来 嵌 套 共享 UI 组 件 : 


// index.js 
We 
render(( 
<Router history={hashHistory}> 
<Route path="/" component={App}> 


{/* 注意 这 里 把 两 个 子 组 件 放 在 Route 里 ， 幅 套 在 了 App 的 Route 里 /} 


<Route path="/repos" component={Repos}/> 
<Route path="/about" component={About}/> 
</Route> 
</Router> 
), document .getElementById('app')) 


接 下 来 ， 在 App 中 将 子 组 件 泻 染 出 来 : 


// modules/App.js 
We 
render() { 
return ( 
<div> 
<hl>React Router Tutorial</hl> 
<ul role="nav"> 
<1i><Link to="/about">About</Link></1i> 
<1i><Link to="/repos">Repos</Link></1i> 
</ul> 
{/* 注意 这 里 将 子 组 件 泻 染 出 来 */} 
{this.props.children} 
</div> 
) 
} 
Va 
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Link 组 件 可 用 于 取代 <a> 元 素 ， 生 成 一 个 链接 ， 人 允许 用 户 单 击 后 跳 转 到 另 一 个 路 由 。 它 基 
本 上 就 是 <a> 元 素 的 React 版 本 ， 可 以 接收 Router 的 状态 : 


上 述 示例 使 用 了 Link 组 件 ， 可 以 泻 染 出 链接 并 使 用 to 属性 指向 相应 的 路 由 。 
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上 一 章 介 绍 了 React 架构 ， 本 章 开 始 介 绍 React 服务 端 演 染 (Server Side Render, SSR) 。 
React 不 仅 能 实现 客户 端 泻 染 ， 还 很 好 地 支持 服务 端 泻 染 。 本 章 对 服务 端 泻 染 的 意义 、 原 理 以 
及 实现 方案 展开 讨论 。 


服务 端 泻 染 的 意义 


服务 端 泻 染 其 实 就 是 多 页 应 用 的 原始 做 法 ， 后 台 应 用 根据 用 户 访问 的 不 同 URL 路 径 ， 分 
别 执行 增 、 删 、 应 的 模板 到 浏览 器 端 ， 这 在 传统 的 JSP、PHP 中 就 已 经 广泛 使 
用 。 其 中 页 面 内 容 部 是 2 由 后 端 模板 生成 ， 而 前 端 JavaScript 的 作用 更 多 的 是 做 一 些 动 态 效 果 。 
随 着 前 后 端 分 离 越 来 越 彻底 , 同时 也 得 益 于 前 端 发 展 速度 越 来 越 快 , 前 后 端的 合作 模式 逐 
渐 演 变 成 由 后 端 提供 API (Application Programming Interface) 接口 、 前 端 通过 AJAX 等 异步 
获取 数据 的 方法 获取 数据 ， 而 后 由 前 端 进行 页 面 泻 染 。 近 些 年 来 ， 随 着 React/Vue 等 框架 的 出 
现 ， 前 后 端的 这 种 开发 方式 越 来 越 普及 ， 基 本 成 为 标 配 ， 前 端 也 越 来 越 重 要 ， 网 站 也 开始 向 单 
页 面 应 用 发 展 。 
单 页 面 应 用 即 SPA， 是 Single Page Application 的 缩写 。 然 而 ， 纯 客户 端 泻 染 的 单 页 面 应 
用 也 带 来 一 些 棘手 的 问题 ， 最 常见 的 是 单 页 应 用 不 利于 SEO 的 问题 和 首 屏 泻 染 性 能 的 问题 。 
首先 ， 纯 客户 端 泻 染 的 单 页 面 应 用 的 内 容 都 是 通过 JavaScript 完成 泻 染 的 客户 端 泻 染 ) ， 


即 浏览 器 最 初 获取 的 是 一 个 空 的 HIML 文件 ， 这 就 造成 了 SEO 困难 ,搜索 引擎 几乎 抓 不 到 异 
步 接口 返回 的 内 容 ， 这 种 情况 面向 消费 才 罗网 站 来 说 问题 是 非常 严重 的 。 


其 


次 ， 纯 客户 端 泻 染 的 单 页 面 应 用 的 内 容 都 是 JavaScript 生成 的 ， 而 JavaScript 异步 获取 


ns A 


问题 (“ 白 屏 ”是 在 完全 
后 端 模板 泻 染 完 HTML 再 发 送 给 浏览 器 的 上 


到 数据 并 进行 泻 染 页 面 之 前 存在 首页 “ 白 屏 ” 
网 站 中 可 能 发 生 的 情况 ) ， 这 种 情况 相 较 于 
信 欠 佳 。 

因此 , 现在 讨论 服务 端 泻 染 与 传统 的 多 页 面 网 站 服务 器 端 泻 染 层次 不 同 。 我 们 所 说 的 服务 
端 泻 染 是 在 现 有 架构 不 变 的 情况 下 ， 即 后 端 依旧 只 是 提供 API 服务 ， 前 端 人 员 依旧 通过 异步 
请 求 数据 ， 同 时 要 达到 传统 多 页 应 用 的 首 屏 加 载 性 能 ， 且 进行 SEO 优化 到 搜索 引擎 息 虫 抓 取 
工具 可 以 直接 查看 完全 泻 染 的 页 面 Google 有 时 会 执行 JavaScript 程序 并 且 对 生成 的 内 容 进 
行 索引 ， 但 并 不 总 是 的 这 样 ) 。 因 为 服务 端 泻 染 确实 有 着 许多 优势 ， 尤 其 是 React 和 Node 相 


由 客户 端 呈 现 的 React 
户 体 
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结合 
人 
合 。 


实现 前 后 端 同 构 、 前 后 端 共用 
这 里 来 对 比 一 下 客户 端 泻 染 和 服务 端 泻 染 的 原理 和 过 程 ， 可 参见 图 9-1。 


套 代码 , 更 是 将 单 页 应 用 的 便利 和 服务 端 泻 染 的 好 处 相 结 


客户 端 泻 染 


下 载 JS/CSS 资 源 
(客户 端 ) 


请 求 数据 


服务 端 泻 染 下 载 JS/CSS 资 源 


(客户 端 ) 


(服务 端 ) 


图 9-1 客户 端 泻 染 和 服务 端 泻 染 对 比 
客户 端 泻 染 遵循 如 下 过 程 : 


(1) 请 求 页 面 对 应 的 HTML。 

(2) 服务 端 返回 对 应 的 HTML 文件 。 

(3) 浏览 器 下 载 HTML 文件 中 的 JavaScripUCSS 资源 文件 。 

(4) 等 待 JavaScripVCSS 资源 文件 下 载 完 成 。 

(5) 等 待 JavaScripVCSS 加 载 并 初始 化 / 泻 染 完 成 。 

(6) 运行 JavaScript 代码 ， 由 JavaScript 代码 向 后 端 请 求 数据 (ajax/fetch) 。 
(7) 等 待 后 端 数据 返回 。 

(8) 客户 端 完 成 页 面 泻 染 。 


相应 地 ， 服 务 端 泻 染 遵循 如 下 过 程 : 


(1) 请 求 页 面 对 应 的 HTML。 

(2) 服务 端 请 求 数据 〈 内 网 请 求 快 ) 。 

(3) 服务 器 初始 泻 染 〈 服 务 端 性 能 优秀 ) 。 

(4) 服务 端 返回 已 经 有 正确 内 容 的 页 面 。 

(5) 客户 端 请 求 JavaScripUCSS 资源 文件 。 

(6) 等 待 JavaScript/CSS 资源 文件 下 载 完成 。 

(7) 等 待 JavaScripVCSS 加 载 并 初始 化 / 泻 染 完 成 。 
(8) 客户 端 把 剩 下 的 一 部 分 泻 染 完 成 (可 懒 加 载 )。 


无 论 是 客户 端 演 染 还 是 服务 端 演 染 ， 都 包含 三 个 主体 过 程 ， 下载 JavaScript/CSS 文件 、 请 
求 数据 、 演 染 页 面 。 其 中 ， 客 户 端 泻 染 执行 的 顺序 是 “下 载 JavaScripUCSS 文件 ”一 “请 求 数 
据 ” 一 “ 演 染 页 面 ”, 三 个 过 程 都 在 客户 端 进行 ; 服务 端 渲染 执行 的 顺序 是 “请 求 数据 ”一 “ 演 


染 页 面 


JavaS' 


”一 “下 载 JavaScript/CSS 文件 ”， 其 中 请 求 数据 和 泻 染 页 面 在 服务 端 进行 ， 最 后 下 载 


cripVCSS 文件 在 客户 端 进行 。 
服务 端 泻 染 改 变 了 三 个 过 程 的 执行 顺序 和 执行 服务 器 ,返回 到 客户 端的 是 已 经 有 正确 内 容 


的 页 


， 可 直接 用 于 SEO。 同 时 ， 相 比 于 客户 端 首 屏 泻 染 ， 服 务 端 首 屏 渲染 不 需要 在 客户 端 


下 载 JavaScripUCSS 文件 ， 客 户 端 接收 服务 端 内 容 的 时 候 ， 接 收 的 已 经 是 完整 的 可 视 页 面 
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务 端 在 内 网 请 求 数据 ( 拉 取 数据 ， 数 据 响 应 速度 是 很 快 的 ; 而 对 于 客户 端 泻 染 ， 外 网 HITP 


请 求 开 销 大 ， 且 受到 具体 的 网 络 环境 的 限制 。 因 此 ， 服 务 端 泻 染 的 首 屏 泻 染 比 客户 端 泻 染 性 能 
更 优 。 


日 . 2 理解 服务 端 泻 染 原 理 


上 一 节 描述 了 客户 端 泻 染 和 服务 端 泻 染 ， 实 际 上 分 别 对 应 了 两 种 Web 构建 模式 ， 前 后 分 
离 模式 和 直 出 模式 。 前 后 分 离 模式 对 应 客户 端 泻 染 〈 见 图 9-2)， 直 出 模式 对 应 服务 端 泻 染 ( 见 


9-3) 5 
Web 服务 器 ep 


图 9-2 客户 端 演 染 
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图 9-3 服务 端 泻 染 


相对 于 客户 端 泻 染 来 说 ， 服 务 端 泻 染 的 核心 保障 是 首 屏 泻 染 。 服 务 端 泻 染 需要 在 请 求 
HTML 时 直接 返回 演 染 好 的 首 屏 页 面 (包括 所 需 的 服务 端 数据 》。 使 用 Node 和 React 相 结合 
的 前 后 端 同 构 、 前 后 端 共 用 一 套 代码 ， 对 应 的 服务 端 泻 染 的 原理 如 图 9-4 所 示 。 


Server(Node) 


9-4 ”服务 端 泻 染 原理 


从 图 9-4 可 以 看 出 , 我 们 希望 尽 可 能 复 用 同一 份 代码 实现 客户 端 泻 染 和 服务 端 演 染 ， 以 便 
于 开发 和 后 期 维护 。 在 前 后 端 泻 染 相同 的 Component， 将 输出 一 致 的 DOM 结构 。 完 善 的 
Component 属性 及 生命 周期 与 客户 端的 render 时 机 是 React 同 构 的 关键 。React 的 虚拟 DOM 
以 对 象 树 的 形式 保存 在 内 存 中 ， 并 且 是 可 以 在 任何 支持 JavaScript 的 环境 中 生成 的 ， 所 以 可 以 
在 浏览 器 和 Node 中 生成 ， 这 为 前 后 端 同 构 提 供 了 先决 条 件 。 
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如 图 9-5 所 示 ，React 的 虚拟 DOM 是 可 以 在 任何 支持 JavaScript 的 环境 中 生成 的 ,所 以 可 
以 在 浏览 器 Node 环境 中 生成 。 虚 拟 DOM 既 可 以 直接 转 成 Stting， 也 可 以 直接 输入 到 HIML 


文件 中 返回 给 浏览 器 。 


JSX + Data 


Virtual DOM 


React.renderToString 
HTML 


图 9-5 服务 端 生 成 HTML 


虚拟 DOM 在 前 后 端 都 是 以 对 象 树 的 形式 存在 的 ， 但 展露 原型 的 方式 却 有 所 不 同 ， 如 图 
9-6 所 示 。 在 浏览 器 里 , React 通过 ReactDom 的 render 方法 将 虚拟 DOM 泻 染 到 真实 的 DOM 
树 上 ， 生 成 网 页 。@ 在 Node 环境 下 是 没有 泻 染 引擎 的 ， 所 以 React 提供 了 另外 两 个 方法 ， 即 
ReactDOMServer renderToString 和 ReactDOMServer.renderToStaticMarkup， 可 将 其 演 染 为 
HTML 字符 串 。 


Client DOM Element 


Virtual DOM 
HTML String 


图 9-6 虚拟 DOM 


服务 端 结合 数据 将 Component 演 染 成 完整 的 HIML 字符 串 并 将 数据 状态 返回 给 客户 端 ， 
客户 端 会 判断 是 否 可 以 直接 使 用 或 需要 重新 挂 载 。 这 些 是 React 在 服务 端 演 染 提供 的 基础 条 
件 。 在 实际 项 目 应 用 中 ， 还 需要 考虑 其 他 问题 。 例 如 ， 服 务 器 端 没有 window 对 象 ， 需 要 做 不 
同 处 理 等 。 
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sb 。 re xs 
实战 : 动手 实现 服务 端 泻 染 

了 解 了 服务 端 泻 染 的 意义 和 基本 泻 染 原 理 之 后 ， 本 节 开 始 动手 实现 服务 端 泻 染 。 

(1) 首先 准备 一 个 简单 的 React 项 目 ， 例 如 : 


import React from 'react'; 
import ReactDOM from "Teact-dom'7 
// 引入 redux 
import { 
createstore, 
applyMiddleware, 
compose 
yfrom “redux™y 
import { Provider } from "react-redux"; 
// 引入 thunk 中 间 件 
import thunk from "redux-thunk"; 
// 引入 组 件 
import { 
BrowserRouter 
} from "react-router-dom"; 
// 引入 reducer 
import reducers from "./reducer"; 
// 引入 路 由 
import Routers from './router' 
// 引入 antq css 
import "antd-mobile/dist/antd-mobile.css'7 
// 创建 store 
const store = createstore (reducers, compose( 


applyMiddleware (thunk), 
)); 
// 演 染 组 件 
ReactDOM.render ( 
<Provider store={store}> 
<BrowserRouter> 
<Routers/> 
</BrowserRouter> 
</Provider>, 
document .getElementById('root') 
); 


在 构建 完成 的 项 目 目录 中 生成 build 目录 , build 目录 中 含有 一 个 asset-manifest.json 的 文件 ， 
该 文件 存储 的 是 打包 后 JavaScript、CSS 文件 的 路 径 , 可 以 看 到 每 个 路 径 后 面 都 有 一 个 哈 希 值 ， 
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每 次 打包 生成 的 哈 希 值 都 不 同 ， 可 用 于 区 分 版 本 ， 为 以 后 做 服务 端 泻 染 做 好 铺垫 。 
(2) 接着 ， 我 们 在 本 地 搭建 一 个 server。 修 改 server 文件 的 serverjs， 代 码 如 下 : 


// 引入 express 

Const express = require ("express"); 

const bodyParser = require ("body-parser"); 
Const cookieParser = require("cookie-parser"); 
const userRoute = require("./userRoute"); 

// 创建 实例 

const app = express(); 

const path = require('path'); 

app.use (cookieParser ()); 

app.use (bodyParser.json()); 


// 用 户 接口 模块 


app.use("/user",userRoute); 


// 映射 到 build 后 的 路 径 
// 设置 build 以 后 的 文件 路 径 项 目 上 线 用 
app.use((req, res, next) => { 
if (req.url.startsWith('/user/') || req.url.startsWith('/static/')) { 
return next() 
} 
return res.sendFile (path.resolve('build/index.html')) 
}) 
// 路 由 
app.use('/', express.static(path.resolve('build'))) 
// 设置 端口 
app.listen("9000", function(){ 
console.1log("open Browser http://localhost:9000"); 
1); 


(3) 我 们 在 package.json 中 增加 一 条 命令 ，scripts 如 下 : 


ocripts™e 
notart”: node acripts/start. 3s", 
"build™: "node scripts/build:js", 
"test": "node scripts/test.js --env=jsdom", 
"server": "nodemon server/server.js" 


}, 


(4) 运行 npm run server， 在 浏览 器 中 打开 http://localhost:9000/， 可 以 看 到 项 目 已 经 运行 
成 功 ， 此 时 我 们 的 端口 是 9000， 并 且 代码 运行 的 都 是 build 以 后 的 代码 。 
(5) React.createElement 把 React 类 进行 实例 化 ， 实 例 化 后 的 组 件 就 可 以 进行 mount 操 
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作 ， 在 浏览 器 环境 中 我 们 是 使 用 ReactDOMrender0 来 进行 演 染 操作 的 。 

ReactDOMServer renderToString 则 是 把 React 实例 泻 染 成 HTML 标签 。 接 下 来 需要 把 index.js 

中 的 代码 挪 到 serverjs 中 ， 演 染 成 HTML 返回 给 客户 端 即 可 。 进 行 代码 改造 ， 完 成 后 如 下 : 
// 引入 express 


const express = require ("express"); 


const bodyParser = require("body-parser"); 
const cookieParser = require ("cookie-parser"); 
const userRoute = require("./userRoute"); 

// 创建 实例 

const app = express(); 

const path = require('path'); 

app.use (CookieParser ()); 


app.use (bodyParser.json()); 


pA 交友 
* 插入 react 代码 进行 服务 端 改造 
转交 
import React from 'react'; 
import ReactDOM from 'react-dom'; 
// 引入 redux 
import { 
createstore, 
applyMiddleware, 
compose 
} from "redux"; 
import { Provider } from "react-redux"; 
import thunk from "redux-thunk"; 
// I 和 renderTostring 
import { renderTostring, renderToSstaticMarkup } from 'react-dom/server'; 
// 服务 端 没有 BrowserRouter， 所 以 用 staticRouter 
import { StaticRouter } from "react-router-dom"; 
// 引入 reducer 


import reducers from "../src/reducer"; 
// 引入 前 端 路 由 
import Routers from '../src/router'" 


const store = createstore (reducers, compose( 
applyMiddleware (thunk), 
)); 


// 用 户 接 口 模块 


app.use("/user", userRoute); 
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// 映射 到 build 后 的 路 径 
// 设 置 build 以 后 的 文件 路 径 项 目 上 线 用 
app.use((req, res, next) => { 
if (req.url.startsWith('/user/') || req.url.startsWith('/static/')) { 
return next() 
} 
const context = {} 
const frontComponents = renderToString( 
(<Provider store={store}> 
<StaticRouteT 
location={req.url} 
context={context}> 
<Routers /> 
</StaticRouter> 
</Provider>) 
) 
res.send(frontComponents) 
// return res.sendFile(path.resolve('build/index.html')) 
}) 
// 服务 端 路 由 
app.use('/', express.static(path.resolve('build'))) 
// 设置 端口 
app.listen("9000", function () { 
console.1og("open Browser http://localhost:9000"); 


DD); 

可 以 看 到 我 们 将 前 端 代码 用 renderToString0 处 理 后 返回 给 前 端 ， 这 样 前 端 就 能 接收 到 首 
屏 加 载 所 需要 的 代码 了 ， 但 是 一 个 完整 的 页 面 需 要 由 HTML 等 标签 元 素 构 成 的 ， 还 缺少 一 个 
支持 页 面 的 骨架 ， 需 要 在 服务 端 加 上 返回 给 前 端 。 


(6) 对 serverjs 进行 改造 ， 代 码 如 下 : 
// 处 理 css 


import csshook from 'css-modules-require-hook/preset'; 


// 处 理 图 片 


import assethook from 'asset-require-hook'; 
assethook({ 

extensions: ['png', 'jpg'] 
1); 


const express = require ("express"); 


const bodyParser = require("body-parser"); 


const cookieParser = require("cookie-parser"); 
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const userRoute = require("./userRoute"); 
const app = express(); 

const path = require('path'); 

app.use (cookieParser ()); 


app.use (bodyParser.json()); 


/太太 
* 插入 react 代码 进行 服务 端 改造 
这 汶 
import React from 'react'; 
import ReactDOM from 'react-dom'; 
// 引入 redux 
import { 
createstore, 
applyMiddleware, 
compose 
} from "redux"; 
import { Provider } from "react-redux"; 
// 引入 thunk 中 间 件 
import thunk from "redux-thunk"; 
// 引入 antd css 
import "antd-mobile/dist/antd-mobile.css'7 
// 引入 renderTostring 
import { renderTostring, renderToStaticMarkup } from 'Freact-dom/server'7 
// 服务 端 没有 BrowserRouter， 所 以 用 StaticRouter 
import { StaticRouter } from "react-router-dom"; 
// 引入 reducer 


import reducers from "../src/reducer"; 
// 引入 前 端 路 由 
import Routers from '../src/router' 


// 创建 store 

const store = createstore (reducers, compose( 
applyMiddleware (thunk), 

)); 


// 用 户 接 口 模块 


app.use("/user", userRoute); 


// 映射 到 build 后 的 路 径 
// 设 置 builq 以 后 的 文件 路 径 项 目 上 线 用 
app.use((req, res, next) => { 
if (req.url.startsWith('/user/') || req.url.startsWwith('/static/')) { 


return next() 
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} 
const context = {} 
const frontComponents = renderToString( 
(<Provider store={store}> 
<StaticRouter 
location={req.url} 
context={context}> 
<Routers /> 
</StaticRouter> 
</Provider>) 
) 
// 新 建 骨架 
const frontHtml = “<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1, 
shrink-to-fit=no"> 
<meta name="theme-color" content="#000000"> 
<title> 人 才 市 场 </title> 


</head> 
<body> 
<noscript> 
You need to enable JavaScript to run this app. 
</noscript> 
<div id="root">${frontComponents}</div> 
</body> 
</html>. 


res.send( frontHtml) 
// return res.sendFile(path.resolve('build/index.html')) 
}) 
// 路 由 
app.use('/', express.static(path.resolve('build'))) 
// 端口 
app.listen("9000", function () { 
console.1log ("open Browser http://localhost:9000"); 


1); 
(7) 此 时 刷新 页 面 后 ， 打 开 Network 下 面 的 response， 可 以 看 到 服务 端 已 返回 结果 : 


<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8" /> 
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<meta name="viewport" content="width=device-width, 
WV 

<meta name="theme-color" content="#000000"™ 
<title> 人 才 市 场 </title> 

</head> 

<body> 

<noscript> 


shrink-to-fit=no™ 
> 


You need to _ enable JavaScript to run this app. 
</noscript> 
<div id="root"> 
<div data-reactroot=""> 

<div class="bigbox"> 

<div class="1ogo-container"> 


initial-scale=1, 


<img src="72ba7lde2dfbe02c990266c62394b476.png" alt="" /> 
</div> 

<hl style="color:red;text-align:center">React SSR </hl> 
<div class="am-whitespace am-whitespace-md"></div> 


<div 
<div 
<div 
<div 
<div 
<div 
<div 
<div 
<div 
<div 
<div 
<div 


class="am-whitespace 
class="am-whitespace 
class="am-whitespace 
class="am-whitespace 
class="am-whitespace 
class="am-whitespace 
class="am-whitespace 
class="am-whitespace 
class="am-whitespace 
class="am-whitespace 
class="am-whitespace 


am-whitespace-md"></div> 
am-whitespace-md"></div> 
am-whitespace-md"></div> 
am-whitespace-md"></div> 
am-whitespace-md"></div> 
am-whitespace-md"></div> 
am-whitespace-md"></div> 
am-whitespace-md"></div> 
am-whitespace-md"></div> 
am-whitespace-md"></div> 
am-whitespace-md"></div> 


class="am-wingblank am-wingblank-1g"> 


<div class="am-list"> 
<div class="am-list-header"></div> 
<div class="am-list-body"> 


<div class="am-list-item am-input-item am-list-item-middle"> 


<div class="am-list-line"> 
<div class="am-input-label am-input-label-5" 
<i class="iconfont icon-yonghu c-blue"></i> 
</div> 
<div class="am-input-control"> 
<input type="text" placeholder=" 请 输入 用 户 名 " 
</div> 

</div> 

</div> 


> 


Wales /> 


<div class="am-whitespace am-whitespace-md"></div> 
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<div class="am-whitespace am-whitespace-md"></div> 
<div class="am-list-item am-input-item am-list-item-middle"> 
<div class="am-list-line"> 
<div class="am-input-label am-input-label-5"> 
<i class="iconfont icon-mima c-blue" style="font-size:19px"></i> 
</div> 
<div class="am-input-control"> 
<input type="password" placeholder=" 请 输入 密码 " value="" /> 
</div> 
</div> 
</div> 
</div> 
</div> 
<div class="am-whitespace am-whitespace-md"></div> 
<div class="ta-right"> 
<a href="/"> 忘 记 密码 ? </a> 
</div> 
<div class="am-whitespace am-whitespace-md"></div> 
<div class="am-whitespace am-whitespace-md"></div> 
<a role="button" class="am-button am-button-primary" 
aria-disabled="false"><span> 登 录 </span></a> 
<div class="am-whitespace am-whitespace-md"></div> 
<a role="button" class="am-button am-button-primary" 
aria-disabled="false"><span> 注 册 </span></a> 
<div class="am-whitespace am-whitespace-md"></div> 
<div class="am-whitespace am-whitespace-md"></div> 
</div> 
</div> 
</div> 
</div> 
</body> 
</html> 


(8) 该 HTML 中 没有 引入 CSS 和 JavaScript 文件 ，build 目录 中 asset-manifest.json 的 文 
件 中 有 所 需 的 CSS 和 JavaScript 文件 ， 我 们 引入 它 ， 就 可 以 拿 到 每 次 build 以 后 最 新 的 代码 ， 
对 server.js 进行 代码 改造 : 

// 处 理 css 


import csshook from 'css-modules-require-hook/preset'; 
// 处 理 图 片 
import assethook from 'asset-require-hook'; 
assethook({ 

extensions: ['png', 'jpg'] 
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const express = require ("express"); 

const bodyParser = require("body-parser"); 
const cookieParser = require("cookie-parser"); 
const userRoute = require("./userRoute"); 
const app = express(); 

const path = require('path'); 

app.use (cookieParser ()); 

app.use (bodyParser.json()); 


/** 
* 插入 react 代码 进行 服务 端 改造 
六 
import React from 'react'; 
import ReactDOM from 'react-dom'; 
import { 
createstore, 
applyMiddleware, 
compose 
Pfrom “roduxz"y 
import { Provider } from "react-redux"; 
import thunk from "redux-thunk"; 
// 引入 antd css 
import "antd-mobile/dist/antd-mobile-css'7 
// 引入 renderTostring 
import { renderTostring, renderToStaticMarkup } from 'react-dom/server'; 
// 服务 端 没有 BrowserRouter， 所 以 用 staticRouter 
import { StaticRouter } from "react-router-dom"; 
// 引入 reducer 


import reducers from "../src/reducer"; 
// 引入 前 端 路 由 
import Routers from '../src/router'; 


// 引入 css 和 js 


import buildPath from '../build/asset-manifest.json'; 


const store = createstore (reducers, compose( 
applyMiddleware (thunk), 
人 


// 用 户 接口 模块 


app.use("/user", userRoute); 


// 映射 到 build 后 的 路 径 
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// 设 置 build 以 后 的 文件 路 径 项 目 上 线 用 
app.use((req, res, next) => { 
if (req.url.startsWith('/user/') || req.url.startsWith('/static/')) { 
return next() 
} 
const context = {} 
const frontComponents = renderToString( 
(<Provider store={store}> 
<StaticRouteT 
location={req.url} 
context={context}> 
<Routers /> 
</StaticRouter> 
</Provider>) 
) 
// 新 建 骨架 
const frontHtml = “<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1, 
shrink-to-fit=no"> 
<meta name="theme-color" content="#000000"> 
<title> 人 才 市 场 </title> 
<link rel="stylesheet" type="text/css" 
href="/${buildPath['main.css']}"> 
</head> 
<body> 
<noscript> 
You need to enable JavaScript to run this app. 
</noscript> 
<div id="root">${frontComponents}</div> 
<script src="/${buildPath['main.js']}"></script> 
</body> 
</html>~ 
res.send(_frontHtm]l) 
// return res.sendFile(path.resolve('build/index.html')) 


}) 
app.use('/', express.static(path.resolve('build'))) 


app.listen("9000", function () { 


console.1log("open Browser http://localhost:9000"); 
| 
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(9) 刷新 页 面 后 可 以 看 到 基本 是 我 们 想 要 的 页 面 了 ， 后 台 已 经 返回 一 个 完整 的 HTML: 


<!DOCTYPE html> 


<html lang="en"> 
<head> 
<meta charset="utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=l1, 
shrink-to-fit=no" /> 
<meta name="theme-color" content="#000000" /> 
<title> 人 才 市 场 </title> 
<link rel="stylesheet" type="text/css" href="/static/css/main.f4dbdb58.css" /> 
</head> 
<body> 
<noscript> 
You need to enable JavaScript to run this app. 
</noscript> 
<div id="root"> 
<div data-reactroot=""> 
<div> 
<div class="am-navbar am-navbar-dark"> 
<div class="am-navbar-left" role="button"></div> 
<div class="am-navbar-title"> 
消息 列表 
</div> 
<div class="am-navbar-right"></div> 
</div> 
<div class="mt-45 mb-50"> 
<div> 
msgpages 
</div> 
</div> 
<div class="am-tab-bar"> 
<div class="am-tabs am-tabs-horizontal am-tabs-bottom"> 
<div class="am-tabs-content-wrap" style="touch-action:pan-x 
pan-y;position:relative;left:-200%"> 
<div class="am-tabs-pane-wrap am-tabs-pane-wrap-inactive"></div> 
<div class="am-tabs-pane-wrap am-tabs-pane-wrap-inactive"> 
<div class="am-tab-bar-item"></div> 
</div> 
<div class="am-tabs-pane-wrap am-tabs-pane-wrap-active"> 
<div class="am-tab-bar-item"></div> 
</div> 
<div class="am-tabs-pane-wrap am-tabs-pane-wrap-inactiVve"> 


<div class="am-tab-bar-item"></div> 
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</div> 
</div> 
<div class="am-tabs-tab-bar-wrap"> 
<div class="am-tab-bar-bar" style="background-color:white"> 
<div class="am-tab-bar-tab"> 
<div class="am-tab-bar-tab-icon" style="color:#888"> 
<img class="am-tab-bar-tab-image" 
src="al2c878ee5f7d318376dal91b5b76ef7.png" alt="BOSS" /> 
</div> 
<p class="am-tab-bar-tab-title" style="color:#888">BOSS</p> 
</div> 
<div class="am-tab-bar-tab"> 
<div class="am-tab-bar-tab-icon" style="color:#888"> 
<img class="am-tab-bar-tab-image" 
src="c6c95d08bflb9a888cce1053bfa2bf18.png"” alt=" 牛 人 " /> 
</div> 
<p class="am-tab-bar-tab-title" style="color:#888"> 牛 人 </p> 
</div> 
<div class="am-tab-bar-tab"> 
<div class="am-tab-bar-tab-icon" style="color:#108ee9"> 
<img class="am-tab-bar-tab-image" 
src="f73fc85762cfbe7999c792ce031c7fce.png" alt=" 消 息 " /> 
</div> 
<p class="am-tab-bar-tab-title" style="color:#108ee9"> 消 息 </p> 
</div> 
<div class="am-tab-bar-tab"> 
<div class="am-tab-bar-tab-icon" style="color:#888"> 
<img class="am-tab-bar-tab-image" 
src="3bf7cld72788277bal3047821af2d180 .png”alt=" 我 的 " /> 
</div> 
<p class="am-tab-bar-tab-title" style="color:#888"> 我 的 </p> 
</div> 
</div> 
</div> 
</div> 
</div> 
</div> 
</div> 
</div> 
<script src="/static/js/main.7993f0al.js"></script> 
</body> 
</html> 


一 个 简单 的 、 基 于 React 的 服务 端 泻 染 已 完成 。 
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7 ,A 服务 器 演 染 的 思考 


本 章 介 绍 了 服务 端 演 染 的 意义 、 泻 染 原 理 和 演 染 示例 。 值 得 思考 的 是 ， 随 着 用 户 个 性 化 算 
法 的 深入 , 服务 端 演 染 需要 面 对 个 性 化 缓存 的 问题 。 试想 把 每 个 用 户 个 性 化 信息 全 部 缓存 放 到 
服务 器 存储 , 需要 的 存储 空间 和 计算 都 是 非常 大 的 , 这 部 分 信息 若 由 用 户 浏览 器 存储 则 能 形成 
类 似 分 布 式 存储 的 效果 。 同 时 , 在 做 前 后 端 代码 复 用 时 需要 慎重 , 前 端 代 码 在 编写 时 需 仔细 考 
虑 后 端 泻 染 的 情景 ， 慎 用 BOM 对 象 和 DOM API。 

做 服务 端 泻 染 同 构 之 前 ， 一 定 要 考虑 到 浏览 器 和 服务 器 的 环境 差异 ， 站 在 更 高 层面 考虑 。 
Nextjs 是 时 下 非常 流行 的 基于 React 的 同 构 开 发 框架 ， 提 供 了 异步 请 求 、 样 式 、 拆 分 文件 打 
包 的 整体 解决 方案 。 
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测试 是 一 种 比较 实际 输出 与 预期 输出 之 间 差 异 的 过 程 ,通过 测试 可 以 衡量 代码 的 质量 和 评 
估 能 否 满足 实际 需求 。 所 有 的 代码 均 需 经 过 测试 才 允 许 发 布 上 线 。 本 章 介绍 测试 驱动 开发 的 好 
处 、 现 状 ， 以 及 如 何 使 用 React 测试 工具 。 


测试 驱动 开发 


测试 驱动 开发 (Test-Driven Development，TDD) 是 敏捷 开发 中 的 一 项 核心 实践 和 技术 ， 
也 是 一 种 设计 方法 论 ， 其 基本 思想 是 在 明确 所 需 开 发 的 功能 之 后 ， 在 着 手 编写 功能 代码 之 前 ， 
优先 进行 测试 代码 的 编写 , 随后 编写 功能 代码 并 使 用 测试 代码 进行 验证 , 如 此 循环 直到 完成 全 
部 的 功能 开发 。 

测试 驱动 开发 有 广义 和 狭义 之 分 , 常 说 的 是 狭义 的 测试 驱动 开发 , 也 就 是 单 页 测试 驱动 开 
发 (Unit Test Driven Development, UTDD) 。 广 义 的 TDD 是 验收 测试 驱动 开发 (Acceptance Test 
Driven Development，ATDD) ， 包 括 行为 驱动 开发 (Behavior Driven Development，BDD ) 和 
以 服务 消费 者 定义 契约 为 驱动 的 开发 模式 〈Consumer-Driven Contracts Development) 等 。 我 
们 这 里 说 的 TDD 测 试 驱动 开发 ) ， 实 际 上 可 以 更 准确 地 描述 为 单元 测试 驱动 开发 。 

测试 驱动 开发 的 核心 目标 是 编写 出 优秀 、 高 质量 、 有 具有 可 维护 性 的 和 可 扩展 性 的 代码 。 


10.1.1 测试 驱动 开发 的 好 处 

或 许 有 许多 开发 者 不 喜欢 写 测试 用 例 代码 , 觉得 编写 测试 用 例 是 在 浪费 时 间 , 而 且 测试 用 
例 代码 维护 起 来 也 是 非常 烦琐 。 但 是 当 你 尝试 开始 写 测试 代码 的 时 候 ， 特 别 是 基础 组 件 类 的 ， 
就 会 发 现 测试 代码 的 好 处 , 不 但 能 提高 组 件 的 代码 质量 , 而 且 当 依赖 库 发 生 更 新 、 版 本 变化 时 ， 
能 够 立刻 发 现 这 些 潜在 的 问题 和 风险 。 如 果 没 有 测试 代码 ， 就 更 谈 不 上 自动 化 测试 了 。 

测试 驱动 开发 有 以 下 几 项 好 处 。 

(1) 保证 代码 质量 

通过 明确 的 流程 , 让 开发 者 一 次 只 关注 一 个 功能 点 , 分 离 关 注 点 , 一 次 只 做 一 件 重要 的 妇 
只 关注 一 个 重要 的 方面 ， 减 小 思维 负担 ， 注 重 代码 质量 ， 编 写 结构 清晰 的 代码 。 
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(2) 保证 代码 与 业务 需求 的 一 致 性 

提前 编写 测试 用 例 可 以 帮助 我 们 去 思考 需求 细节 和 边界 , 对 需求 范围 进行 细致 梳理 , 避免 
代码 编写 过 程 中 才 发 现 需求 信息 不 对 称 的 情况 。 测 试 驱动 开发 能 够 完全 覆盖 所 有 的 单元 测试 ， 
对 产品 代码 提供 了 一 个 保护 措施 。 


(3) 自动 化 测试 、 回 归 测 试 ， 确 保 新 的 更 改 不 影响 现 有 功能 

测试 驱动 开发 能 够 在 保证 项 目的 代码 与 所 需 的 业务 匹配 的 同时 , 让 开发 者 轻松 地 接受 新 的 
需求 变化 或 改善 代码 的 设计 ， 并 进行 自动 化 测试 和 回归 测试 ， 确 保 新 的 更 改 不 影响 现 有 功能 ， 
保证 之 前 功能 的 正确 与 完整 性 ， 减 少 不 必 要 的 问题 。 


(4) 提升 测试 效率 

从 一 个 角度 看 , 编写 测试 用 例会 造成 所 需 编写 的 代码 量 增加 , 造成 开发 效率 的 降低 。 但是， 
如 果 没 有 单元 测试 ， 我 们 就 需要 手动 测试 ， 甚 至 仍然 需要 花费 许多 时 间 和 精力 准备 测试 数据 ， 
完整 的 测试 下 来 反馈 链 路 非常 长 。 准 确 地 说 ， 快 速 反馈 是 单元 测试 的 一 大 优势 。 

(5) 提升 系统 的 开放 性 和 扩展 性 

为 了 实现 测试 驱动 开发 , 提前 思考 程序 设计 模式 与 解 艳 , 有 利于 提升 系统 的 开放 性 和 扩展 
性 ， 便 于 协同 开发 和 多 功能 模块 的 组 装 。 


10.1.2 测试 驱动 开发 现状 
传统 开发 模式 流程 通常 是 接手 需求 之 后 立刻 进行 项 目 代码 开发 ,开发 完成 之 后 再 进行 测试 
用 例 编 写 ， 然 后 运行 测试 用 例 ， 发 现 并 修复 代码 缺陷 ， 如 图 10-1 所 示 。 


图 10-1 传统 开发 流程 
测试 驱动 开发 模式 流程 则 是 优先 编写 测试 用 例 ， 运 行 测试 用 例 与 编写 项 目 代 码 交替 进行 ， 
最 后 重 构 /组 装 代码 ， 如 图 10-2 所 示 。 
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编写 测试 用 例 运行 测试 用 例 


运行 代码 
并 通过 单元 测试 


运行 测试 用 例 六 


若 测试 用 例 未 通过 


图 10-2 ”测试 驱动 开发 流程 
测试 驱动 开发 已 得 到 越 来 越 广泛 的 重视 ， 如 今 越 来 越 多 的 公司 都 在 尝试 实践 测试 驱动 开 
发 。 由 于 测试 驱动 开发 对 开发 人 员 要 求 比较 高 , 需要 开发 人 员 的 转变 思维 习惯 ,逐步 适应 并 提 
升 效率 。 


10.1.3 定义 属于 自己 的 测试 原则 


(1) 测试 驱动 
测试 驱动 开发 的 基本 思想 是 在 开发 功能 代码 前 先 开发 测试 代码 , 并 用 测试 代码 验证 功能 实 
现 是 否 满足 需求 或 存在 缺陷 ， 在 测试 代码 的 驱动 下 优化 功能 代码 的 开发 。 


(2) 独立 测试 

测试 代码 的 作用 是 在 被 测 代码 发 生 改动 后 ,执行 单元 测试 用 例 即 可 验证 本 次 改动 是 否 对 函 
数 原 有 功能 造成 影响 ， 是 未 来 函数 重 构 的 信心 保证 。 测试 驱动 开发 的 实施 手段 是 单元 测试 , 在 
每 次 版 本 改动 后 , 使 用 测试 用 例 验证 了 版 本 修复 情况 , 同时 也 验证 了 本 次 改动 是 否 引 起 回归 问 
题 。 

(3) 可 测试 性 

在 产品 代码 设计 、 开 发 时 应 尽 可 能 提高 可 测试 性 。 每 个 代码 单元 的 功能 应 该 尽 可 能 纯粹 简 
明 ， 每 个 类 、 每 个 函数 应 该 只 做 它 该 做 的 事 ， 避 免 耦合 。 尤 其 是 增加 新 功能 时 ， 不 要 为 了 图 一 
时 之 便 ， 随 便 在 原 有 代码 中 添加 功能 。 


(4) 及 时 重 构 
结构 不 合理 、 重 复 等 不 优秀 的 代码 ， 在 测试 通过 后 ， 应 及 时 进行 重 构 。 
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1 0 9 2 React 测试 工具 


前 端 有 非常 多 的 工具 可 以 选择 ， 比 如 Mocha、Jasmine、Karma、Jest 等 ， 要 从 这 些 工具 里 
面 选择 一 个 也 是 比较 困难 的 问题 。React 的 组 件 结构 和 JSX 语法 不 适用 传统 的 测试 工具 ， 必 须 
有 新 的 测试 方法 和 工具 ， 现 在 主流 推荐 使 用 Jest 作为 测试 框架 、Enzyme 作为 React 组 件 测试 
工具 。 我 们 做 单元 测试 也 主要 关注 四 个 方面 : 组 件 泻 染 、 状 态 变化 、 事 件 响 应 、 网 络 请 求 。 


10.2.1 Jest 


Jest 是 Facebook 发 布 的 一 个 开源 的 、 基 于 Jasmine 框架 的 JavaScript 单元 测试 工具 ， 支 持 
断言 、 仿 真 、 快 照 测 试 、 测 试 覆 盖 率 报告 等 。Jest 作为 一 款 测 试 框架 ， 拥 有 测试 框架 该 有 的 一 
套 体系 、 丰 富 的 断言 库 ， 并 且 大 多 数 API 与 过 去 熟知 的 测试 框架 Jasmine、Mocha 等 基本 保持 
一 致 ,譬如 常用 的 expect、test(it)、toBe 等 API 都 是 非常 方便 、 常 用 的 方法 ,Jest 内 部 使 用 Jasmine 
作为 基础 ， 在 其 上 进行 封装 ， 尤 其 是 Snapshot 这 个 特色 功能 ， 非 常 适合 React 项 目的 测试 。 测 
试 的 方法 论 ， 可 以 根据 自己 的 喜好 实践 ， 如 TDD 和 BDD (Jest 对 这 两 者 都 支持 ) 。React 官 
方 也 推荐 使 用 Jest 作为 测试 引擎 。Jest 的 突出 特征 如 下 : 


(1) 支持 Snapshot 组 件 快照 
Jest 通过 借用 react-test-renderer 库 的 renderer 获得 React 组 件 泻 染 成 的 React 树 ， 调 用 
toJSON 接口 格式 化 ， 再 使 用 Jest 的 expect(tree).toMatchSnapshot() 将 快照 与 上 一 次 的 快照 做 对 
比 , 首次 生成 的 某 个 测试 案例 的 快照 将 会 被 保存 下 来 ， 以 后 每 次 运行 时 都 会 与 上 一 次 对 比 ， 如 
果 发 现 不 匹配 就 会 抛 出 错误 , 需要 开发 者 查看 差异 是 否 是 合法 的 需要 更 新 的 内 容 。 这 种 方式 对 
比 React 组 件 泻 染 后 的 内 容 ， 能 够 非常 高 效 地 找 出 静态 UI 的 差别 ， 维 护 稳 定性 ， 并 且 Jest 能 
够 对 React 树 进 行 快照 或 对 别 的 序列 化 数值 快速 编写 测试 ， 提 供 快 速 更 新 的 用 户 体验 。 


(2) 支持 多 线程 运行 测试 案例 ， 速 度 快 
Jest 虚拟 化 了 JavaScript 的 环境 ， 能 模拟 浏览 器 ， 并 且 并 行 执 行 。Jest 支持 多 线程 运行 测 
试 案例 , 这 个 特性 在 实际 项 目 过 程 中 能 够 成 倍 地 缩小 测试 用 例 执 行 时 间 、 较 大 地 提升 运行 效率 。 


(3) 可 配置 的 coverage reports 
Jest 已 内 置 测试 覆盖 报告 特性 。 若 需要 生成 测试 覆盖 报告 ， 则 无 须 再 下 载 其 他 依赖 ， 通 过 
命令 jest --coverage 就 能 生成 coverage 文件 夹 保 存 , 方便 分 析 , 生成 的 覆盖 报告 如 图 10-3 所 示 。 
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图 10-3 测试 覆盖 率 分 析 


(4) 强大 的 mocking 库 
通过 Jest 可 以 得 到 mock 值 、 函 数 、 文 件 多 种 类 型 。 


CDmock 函数 : mock 的 函数 可 以 被 追踪 到 。*const handler = jest.fn()` 的 作用 是 后 续 可 以 通 
过 ‘expect(handler).toBeCalled0” 检查 mock 的 函数 是 否 如 期 被 调用 ， 
“expect(handler).toBeCalledWith('arg')` 检 查 mock 的 函数 调用 时 传 入 的 参数 是 否 是 'arg 等 。 

@mock 文件 : 例如 css、image 等 与 逻辑 测试 无 关 的 资源 文件 可 以 在 配置 时 就 被 mock 掉 ， 
‘"\.0pgljpeglpnglgifleotlotflwebplsvglttflwofflwoff2Imp4|lwebmlwavlmp3|m4alaacloga)$": "<rootDir> 
/spec/_ mocks /fileMock.js","\\.(csslscss)$": "<rootDir>/spec/_mocks /styleMock.js", ， 这 样 
`import" 时 则 不 会 引入 这 些 与 测试 逻辑 无 关 的 文件 。 

@time mock: ‘setTimeout, setInterval, clearTimeout, clearInterval 默认 是 被 mock 的 ， 这 样 
就 不 会 在 执行 时 真 的 等 待 这 些 函 数 获 取 的 时 间 参 数 ,影响 测试 执行 速度 ,但 是 内 部 特殊 的 mock 
让 其 依旧 能 保证 异步 进行 和 执行 顺序 。 


(5) 内 置 jsDom， 提 供 了 DOM 依存 的 环境 
Jest 配合 enzyme, enzyme 可 以 在 jsDom 里 泻 染 出 虚拟 DOM, 然后 我 们 可 以 操作 enzyme， 
进行 交互 测试 。 依 旧 有 window、document 等 对 象 ， 但 是 无 法 往 这 些 虚 拟 DOM 中 插入 script 
标签 进行 其 他 资源 文件 的 加 载 。 
此 外 ，Jest 是 模块 化 、 可 扩展 和 可 配置 的 ， 支 持 异 步 代码 测试 ， 如 promises 和 async/await 


等 。 


10.2.2 Enzyme 


Enzyme 是 由 AirBnb 团队 发 布 和 维护 的 测试 实用 程序 库 ， 提 供 了 一 个 更 好 的 、 高 级 的 
API 来 处 理 测试 中 的 React 组 件 。 
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Enzyme 提供 了 几 种 方式 来 将 React 组 件 演 染 成 真实 的 DOM， 提 供 了 类 似 jQuery 的 API 
来 获取 DOM。Enzyme 提供 了 simulate 函数 来 模拟 事件 触发 ， 提 供 接口 来 获取 组 件 的 state 和 


props 并 且 能 对 其 


进行 操作 。 


Enzyme 实质 上 是 react-test-renderer 的 封装 ，react-test-renderer 的 API 非常 不 友好 ， 但 是 
Enzyme 开发 的 API 跟 jQuery 一 致 ， 如 图 10-4 所 示 。 


fiterlselector) 
fikerWhere(predicate) 
find(selector) 
findWhere(predicate) 
first0 

torEach(in) 

get(index) 
hasClass(className) 
hostNodes0) 

html0 

instancel) 

is(selector) 

isEmpty0 

key0 


last0 


maplfn) 


matchesElement(node) 
name0 
notlselecton 


parentl 


parents0) 


图 10-4” ”Enzyme 的 API 示例 


还 可 以 接 入 enzyme-to-json， 这 样 在 将 Enzyme 生成 的 React 树 生成 snapshot 时 就 可 以 使 


= 


toJson 进行 格式 化 ， 提 高 生成 的 snapshot 的 可 读 性 ， 代 替 了 react-test-renderer 的 toJSON 接 


动手 测试 我 们 的 代码 


10.3.1 使 用 Jest 测试 


【示例 10-1 


Jest 测试 】 


(1) 首先 ， 使 用 yam 安装 Jest: 


yarn add --dev jest 
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或 使 用 npm 安装 Jest : 
npm install --save-dev jest 
(2) 还 需 安装 测试 所 需要 的 依赖 : 
npm install -D babel-jest babel-core babel-preset-env regenerator-runtime 


babel-jest、 babel-core、 regenerator-runtime、babel-preset-env 这 几 个 依赖 是 为 了 让 我 们 
可 以 使 用 ES6 的 语法 特性 进行 单元 测试 。 对 于 ES6 提供 的 import 导入 模块 的 方式 ，Jest 本 身 
是 不 支持 的 。 
(3) 在 项 目的 根 目 录 下 添加 .babelrc 文件 ， 并 在 文件 中 添加 如 下 内 容 : 
{ 


"presets": ["env"] 
} 
(4) 将 packagejson 文件 中 script 的 test 值 修改 为 jest: 
noscriptse 下 
"test": "jest" 
} 
(5) 接 下 来 ， 创 建 src 和 test 目录 及 相关 文件 ， 在 项 目 根 目录 下 创建 src 目录 ， 并 在 src 
目录 下 添加 index-js 文件 ， 在 项 目 根 目录 下 创建 test 目录 ， 并 在 test 目录 下 创建 mdex.testjs 文 
件 。Jest 会 自动 找到 项 目 中 所 有 使 用 .spec.js 或 .testjs 文件 命名 的 测试 文件 并 执行 ,通常 我 们 在 
编写 测试 文件 时 遵循 的 命名 规范 为 “测试 文件 的 文件 名 = 被 测试 模块 名 + .testjs”， 例 如 被 
测试 模块 为 ndex.js， 对 应 的 测试 文件 将 命名 为 mdex.testjs。 
(6) 在 src/functionsjs 中 创建 被 测试 的 代码 ， 让 我 们 从 写 一 个 两 个 数 相 加 的 示例 函数 开 
始 。 首 先 ， 创 建 一 个 sumjs 文件 ， 并 添加 代码 : 
export default { 
sum(a, b) { 
returna+b; 


' 
| 


(7) 在 test/sum.test.js 文件 中 创建 测试 用 例 : 


import utils from '../src/sum; 


test('sum(2 + 2) 等 于 4',() => { 
expect (utils.sum(2, 2)) .toBe(4); 
}) 


(8) 此 时 ， 运 行 apm run test，Jest 会 在 终端 打印 出 如 下 信息 : 
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> jest 


PASS test/sum.test.js 
w sum(2 + 2) 等 于 4 (5ms) 


Test Suites: 1 passed, 1 total 


Tests: 1 passed, 1 total 
Snapshots: 0 total 
Time: 1.745s 


Ran all test suites. 


如 上 所 示 , 我 们 成 功 地 写 了 第 一 个 Jest 测试 , 使 用 expect 和 toBe 来 测试 两 个 值 完全 相同 。 
Jest 为 我 们 提供 了 expect 函数 来 包装 被 测试 的 方法 并 返回 一 个 对 象 , 该 对 象 中 包含 一 系列 的 匹 
配器 来 让 我 们 更 方便 地 进行 断言 , 上面 的 toBe 函数 即 为 一 个 匹配 器 。 下面 介 绍 几 种 常用 的 Jest 
断言 ， 其 中 会 涉及 多 个 匹配 器 。 

(1) .not 

.not 修饰 符 允 许 我 们 测试 结果 不 等 于 某 个 值 的 情况 ,这 和 英语 的 语法 几乎 完全 一 样 ， 很 好 
理解 。 

【示例 10-2 .not 测试】 


//utils.test.js 
import utils from '../src/utils 


test('sum(2，2) 不 等 于 5"，() => { 
expect (utils.sum(2，2)) .not.toBe(5); 
}) 


(2) .toEqual0 
.toEqual 匹配 器 会 递归 地 检查 对 象 所 有 属性 和 属性 值 是 否 相等 ， 所 以 如 果 要 进行 应 用 类 型 
的 比较 时 ， 需 要 使 用 .toEqual 匹配 器 而 不 是 .toBe。 


【示例 10-3 ” .toEqual0 测 试 】 


2 otilse js 
export default { 
getAuthor() { 
return { 
name: ‘LITANGHUI’, 
age: 24, 
} 
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// functions.test.js 


import uitls from *.。/src/utils; 


test (‘getAuthor () 返回 的 对 象 深 度 相等 "'， () => { 
expect (utils.getAuthor()) .toEqual (utils.getAuthor ()); 
3 


test (‘getAuthor () 返回 的 对 象 内 存 地 址 不 同 '*，() => { 
expect (utils.getAuthor()) .not.toBe (utils.getAuthor ()); 
}) 


(3) .toHaveLength 
-toHaveLength 可 以 很 方便 地 用 来 测试 字符 串 和 数组 类 型 的 长 度 是 否 满足 预期 。 


【示例 10-4 .toHaveLength 测试 】 


XXX ntils:js 
export default { 
getIintArray (num) { 
if (!Number.isInteger (num)) { 
throw Error("”getIntArray” 只 接受 整数 类 型 的 参数 ') ; 
} 


let result []; 
for (let I = 0, len = num; I < len; i++) { 


result .push (i); 
} 


return result; 


// utils.test.js 
import utils from v/s3rc/utilsy 


test ("getIntArray (3) 返 回 的 数组 长 度 应 该 为 3 ， () => { 
expect (utils.getIntArray (3)) .toHaveLength (3) 
}) 


(4) .toThrow 
.toThrow 能 够 让 我 们 测试 被 测试 方法 是 否 按照 预期 抛 出 异常 ， 但 是 在 使 用 时 需要 注意 的 
是 : 我 们 必须 使 用 一 个 函数 将 被 测试 的 函数 做 一 个 包装 ， 正 如 下 面 getIntArrayWrapFn 所 做 的 
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那样 ， 否 则 会 因为 函数 抛 出 导致 该 断言 失败 。 
【示例 10-5 .toThrow 测试 】 


// utils.test.js 
import utils from '../src/utils; 


test ('getIntArray (3.3) 应 该 抛 出 错误 '，() => { 
function getIntArrayWrapFn() { 
functions.getIntArray (3.3); 
} 
expect (getIntArrayWrapFn) .toThrow('"getIntArray" 只 接受 整数 类 型 的 参数 ') ; 


}) 
(5) .toMatch 

.toMatch 传 入 一 个 正则 表达 式 ， 它 允许 我 们 用 来 进行 字符 串 类 型 的 正则 匹配 。 
【示例 10-6 .toMatch 测试 】 

// utils.test.js 


dmport atils, from ®.-/3rc/utilss 


test ('getAuthor () .name 应 该 包含 "1i" 这 个 姓氏 '，() => { 
expect (utils.getAuthor() .name) .toMatch (/1i/i); 
对 


下 面 通 过 一 个 完整 示例 来 学 习 如 何 测试 异步 函数 。 
【示例 10-7 测试 异步 函数 】 
这 里 我 们 使 用 最 常用 的 HTTP 请 求 库 axios 来 进行 请 求 处 理 。 首 先 安装 axios: 
npm install axios 
编写 HTTP 请 求 函数 ， 代 码 如 下 : 
// utils.js 


import axios from 'axios'; 


export default { 
fetchUser() { 
return axios.get ('http://jsonplaceholder.typicode.com/users/1') 
.then (res => res.data) 


-Catch (error => console.log (error)); 


A ntils.test.js 
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import utils from *../src/utilss 


test ('fetchUser () 可 以 请 求 到 一 个 含有 name 属性 值 为 Leanne Graham 的 对 象 '，() => { 
expect .assertions (1); 
return utils.fetchUser() 
-then (data => { 
expect (data.name) .toBe('Leanne Graham'") 7 
Ds; 
}) 


在 上 述 代码 中 ， 我 们 调用 了 expect.assertions(1)， 能 确保 在 异步 的 测试 用 例 中 有 一 个 断言 
会 在 回调 函数 中 被 执行 。 这 在 进行 异步 代码 的 测试 中 十 分 有 效 。 
使 用 async 和 await 精简 异步 代码 : 


test ('fetchUser() 可 以 请 求 到 一 个 用 户 名 字 为 Leanne Graham'，async () => { 
expect.assertions (1); 


const data = await functions.fetchUser(); 
expect (data.name) .toBe ('Leanne Graham') 
}) 


10.3.2 ”使 用 Emzyme 测试 


(1) 首先 安装 所 需 依赖 : 


npm install jest --save-dev 
npm install enzyme --save-dev 
npm install enzyme-to-json --save-dev 


(2) 接着 在 package.json 中 添加 基础 配置 ， 例 如 : 


| 
"moduleFileExtensions": [ 
"js", 
"jsx", 
"json™ 
]， 
"testRegex": ".*\\.spec\\.jss$", 
"collectCoverageFrom": [ 
ed 
od ed nd ob GR i 
"ti**#/node modules/**" 
]， 
"moduleNameMapper": { 


"\\. (jpgljpeglpnglgifleotlotflwebplsvglttf|woff|woff2|mp4|webm|lwav|lmp3|m4alaac 
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loga) $": "<rootDir>/spec/ mocks /fileMock.js", 
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}, 


™\\.(csslscss)$": "<rootDir>/spec/ mocks /styleMock.js" 


"setupFiles": [ 


] 
} 


"<rootDir>/spec/setup.js" 


moduleFileExtensions 描述 被 测试 的 文件 里 依赖 的 文件 后 级 。 配 置 文件 后 级 后 ， 依 赖 
的 时 候 只 需 写 需 要 的 文件 名 即 可 ， 工 具 会 根据 配置 去 找 相应 后 缓 的 文件 。 

testRegex 描述 正则 表示 的 测试 文件 。 测 试 文件 的 目录 有 很 多 种 规划 : @ 单 独 放 在 测 
试 文件 夹 。@ 放 在 原文 件 志 ， 和 原文 件 相同 的 位 置 。 若 组 件 都 放 在 测试 文件 夹 ， 而 业 
务 代码 的 测试 还 紧 挨 着 原文 件 放置 , 则 可 通过 文件 名 进行 匹配 , 可 将 所 有 测试 文件 格 
式 都 设 为 XXX.spec.js。 

collectCoverageFrom 描述 生成 测试 覆盖 报告 时 检测 的 履 盖 文件 , 源 文件 代码 都 存放 于 
src 下 的 js 和 jsx 文 件 中 ， 但 是 要 去 除 node modules 下 的 所 有 文件 ， 因 为 其 会 被 作为 
依赖 在 原文 件 里 处 处 引入 。 

moduleNameMapper 描述 mock 了 图 片 、CSS、 字 体 、 音 视频 文件 。 

setupFiles 为 配置 文件 。 在 运行 测试 案例 代码 之 前 ，Jest 会 先 运行 这 里 的 配置 文件 来 
初始 化 所 指定 的 测试 环境 。setupFiles 是 非常 有 用 的 配置 ， 可 以 解决 很 多 问题 。 在 这 
里 可 以 为 全 局 的 window 或 global 对 象 绑 定 内 容 ， 配 置 代 码 所 需 的 运行 环境 。 例 如 ， 
在 setup.js 中 可 配置 全 局 的 react、mock localStorage 等 。 随 着 测试 的 进行 ， 后 续 还 会 
在 这 里 添加 其 他 配置 。 


import React from 'react'; 


if 


(typeof window !== 'undefined') { 


Window.React = React; 


window.localStorage = ( function storageMock() { 


var storage = {}; 
return { 
setItem: function(key, value) { 
storage[key] = value || ''; 
}, 
getItem: function(key) { 
return key in storage ? storage[key] : null; 
}, 
removeItem: function (key) { 
delete storage[key]; 
}, 
get length() { 
return Object.keys (storage) .length; 
}, 
key: function(i) { 
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Var keys = Object.keys (storage); 
return keys[i] || null; 
} 
1 
}) () 


(3) 至 此 ， 测 试 环境 就 搭 好 了 ， 接 着 开始 编写 单元 测试 代码 。 所 需要 测试 的 组 件 或 者 函 
数 必须 从 原文 件 里 导出 来 ， 测 试 文件 才能 引用 到 ， 对 于 原文 件 的 依赖 ， 只 要 不 是 被 mock 的 文 
件 ， 都 会 真实 地 加 载 执 行 。 下 面 给 出 一 个 React 组 件 测试 的 结构 示例 : 
import React from 'react'; 
import { render, mount, shallow } from "enzyme'7 
import toJson from 'enzyme-to-json'; 


import { component } from 'component path'; 


describe('component test', () => { 
it('test one aspect', () => { 


Hs 
1) 


基于 Jest 和 Emzyme 的 特性 ， 针 对 React 项 目 ， 可 以 进行 以 下 几 类 测试 。 
1. 使 用 snapshot 测试 组 件 UI 


snapshot 可 以 测试 组 件 的 演 染 结果 是 否 符合 预期 〈 预 期 就 是 指 上 一 次 录入 保存 的 结果 ) ， 
toMatchSnapshot 方法 会 对 比 这 次 将 要 生成 的 结果 与 上 次 的 区 别 。snapshot 的 测试 案例 形 如 调用 
这 个 组 件 ， 传 入 依赖 的 props。 例 如 ， 对 antd 的 ToolTip 组 件 进行 测试 : 


import { Tooltip } from "antd'7 
import { render } from 'enzyme'; 
import toJson from 'enzyme-to-json'; 


describe ('FileUploadInput render', () => { 
// 基础 使 用 测试 
it('basic use', () =>{ 
const wrapper = render( 
<Tooltip title="prompt text"> 
<span>Tooltip will show when mouse enter.</span> 
</Tooltip> 
) 7 
expect (toJson (wrapper)) .toMatchsnapshot (); 
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}) 
// 测试 箭头 指向 中 心 
it('use arrowPointAtCenter', () => { 
Const wrapper = render!( 
<div> 
<Tooltip placement="topLeft" title="Prompt Text"> 
<Button>Align edge / 边缘 对 齐 </Button> 
</Tooltip> 
<Tooltip placement="topLeft" title="Prompt Text" arrowPointAtCenter> 
<Button>Arrow points to center / 箭头 指向 中 心 </Button> 
</Tooltip> 
</div> 
Ni 
expect (toJson (wrapper)) .toMatchsnapshot (); 
9 


it('use placement', () => { 
// 快照 
const wrapper = render (<div> 
<div style={{ marginLeft: 60 }}> 
<Tooltip placement="topLeft" title={text}> 
<a href="#">TL</a> 
</Tooltip> 
<Tooltip placement="top" title={text}> 
<a href="#">Top</a> 
</Tooltip> 
<Tooltip placement="topRight" title={text}> 
<a href="#">TR</a> 
</Tooltip> 
</div> 
<div style={{ width: 60, float: 'left' }}> 
<Tooltip placement="leftTop" title={text}> 
<a href="#">LT</a> 
</Tooltip> 
<Tooltip placement="]left" title={text}> 
<a href="#">Left</a> 
</Tooltip> 
<Tooltip placement="leftBottom" title={text}> 
<a href="#">LB</a> 
</Tooltip> 
</div> 
<div style={{ width: 60, marginLeft: 270 }}> 
<Tooltip placement="rightTop" title={text}> 
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<a href="#">RT</a> 
</Tooltip> 
<Tooltip placement="right" title={text}> 
<a href="#">Right</a> 
</Tooltip> 
<Tooltip placement="rightBottom" title={text}> 
<a href="#">RB</a> 
</Tooltip> 
</div> 
<div style={{ marginLeft: 60, clear: 'both' }}> 
<Tooltip placement="bottomLeft" title={text}> 
<a href="#">BL</a> 
</Tooltip> 
<Tooltip placement="bottom" title={text}> 
<a href="#">Bottom</a> 
</Tooltip> 
<Tooltip placement="bottomRight" title={text}> 
<a href="#">BR</a> 
</Tooltip> 
</div> 
</div>) 
expect (toJson (wrapper)) .toMatchsnapshot (); 
}) 
}) 


需要 注意 的 是 , 一 个 足够 健壮 的 测试 应 该 覆盖 所 有 的 泻 染 情 况 。 例如， 如 果 向 组 件 传 入 不 
同 的 props 参数 值 ， 组 件 会 泻 染 出 不 同 的 结果 ， 这 时 必须 编写 多 个 测试 用 例 ， 以 便 覆盖 所 有 的 
泻 染 结果 。 回 顾 ToolTip 组 件 ， 其 中 placement 参数 表示 箭头 方向 ，arrowPointAtCenter 参数 表 
示 将 tooltip 的 箭头 位 于 指示 框 中 间 位 置 。 所 以 测试 用 例 中 应 该 加 上 这 些 内 容 : 


it('use arrowPointAtCenter', () => { 
const wrapper = render( 
<div> 
<Tooltip placement="topLeft" title="Prompt Text"> 
<Button>Align edge / 边缘 对 齐 </Button> 
</Tooltip> 
<Tooltip placement="topLeft" title="Prompt Text" arrowPointAtCenter> 
<Button>Arrow points to center / 箭头 指向 中 心 </Button> 
</Tooltip> 
</div> 
); 
expect (toJson (wrapper)) .toMatchsnapshot (); 
}) 
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it('use placement',() => { 
const wrapper = render (<div> 
<div style={{ marginLeft: 60 }}> 
<Tooltip placement="topLeft" title={text}> 
<a href="#">TL</a> 
</Tooltip> 
<Tooltip placement="top" title={text}> 
<a href="#">Top</a> 
</Tooltip> 
<Tooltip placement="topRight" title={text}> 
<a href="#">TR</a> 
</Tooltip> 
</div> 
<div style={{ width: 60, float: 'left' }}> 
<Tooltip placement="leftTop" title={text}> 
<a href="#">LT</a> 
</Tooltip> 
<Tooltip placement="left" title={text}> 
<a href="#">Left</a> 
</Tooltip> 
<Tooltip placement="leftBottom" title={text}> 
<a href="#">LB</a> 
</Tooltip> 
</div> 
<div style={{ width: 60, marginLeft: 270 }}> 
<Tooltip placement="rightTop" title={text}> 
<a href="#">RT</a> 
</Tooltip> 
<Tooltip placement="right" title={text}> 
<a href="#">Right</a> 
</Tooltip> 
<Tooltip placement="rightBottom" title={text}> 
<a href="#">RB</a> 
</Tooltip> 
</div> 
<div style={{ marginLeft: 60, clear: 'both' }}> 
<Tooltip placement="bottomLeft" title={text}> 
<a href="#">BL</a> 
</Tooltip> 
<Tooltip placement="bottom" title={text}> 
<a href="#">Bottom</a> 
</Tooltip> 
<Tooltip placement="bottomRight" title={text}> 
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<a href="#">BR</a> 
</Tooltip> 
</div> 
</div>) 
expect (toJson (wrapper)) .toMatchSnapshot (); 
}) 


2. 使 用 Jest 和 Enzyme 测试 DOM 交互 


Enzyme 有 3 种 泻 染 方式 : render、mount、shallow。 
render 采用 的 是 第 三 方 库 Cheerio 的 泻 染 , 泻 染 结 果 是 普通 的 HTML 结构 。 对 于 snapshot， 
j render 比较 合适 。 
shallow 和 mount 对 组 件 的 泻 染 结 果 不 是 HTML 的 DOM 树 , 而 是 React 树 ， 如 果 Chrome 
装 了 React Devtool 插件 ， 演 染 结果 就 是 在 React Devtool 下 查看 的 组 件 结构 ， 而 render 函数 的 
结果 是 在 element 中 查看 的 结果 。 这 些 只 是 泻 染 结果 上 的 差别 , 更 大 的 差别 是 shallow 和 mount 
的 结果 是 被 封装 的 ReactWrapper， 可 以 进行 多 种 操作 。 例 如 ， 利 用 find0、parents0、children0 
等 选择 器 进行 元 素 查 找 ， 利 用 state()、props0 进 行 数 据 查 找 ， 利 用 setState0、setprops0 操 作 数 
据 ， 利 用 simulate() 模 拟 事件 触发 。 
shallow 只 演 染 当前 组 件 ， 只 能 对 当前 组 件 做 断言 ，mount 会 泻 染 当 前 组 件 以 及 所 有 子 组 
件 ， 对 所 有 子 组 件 也 可 以 做 上 述 操作 。 一 般 交 互 测试 都 会 关心 到 子 组 件 ， 都 需要 使 用 mount， 
但 是 mount 耗 时 更 长 ， 内 存 占 用 更 多 。 如 果 没 必要 操作 和 断言 子 组 件 ， 可 以 使 用 shallow。 
利用 simulate(O) 接 口 模拟 事件 进行 交互 测试 ， 实 际 上 是 通过 触发 事件 绑 定 函数 来 模拟 事件 
的 触发 。 触 发 事件 后 ， 判 断 props 上 特定 函数 是 否 被 调用 、 传 参 是 否 正 确 、 组 件 状态 是 否 发 生 
预料 之 中 的 修改 、 某 个 DOM 节点 是 否 存在 以 及 是 否 符合 期 望 。 


import React from 'react'; 


使 


import { render, mount } from 'enzyme'; 
import { renderToJson } from 'enzyme-to-json'; 
import { Table } from "antd'7 


describe('Table.pagination', () => { 
const columns = [{ 
title: 'Name', 
dataIndex: 'name', 
[ga 


const aata =°[ 
{ key: 0, name: "Jack' }, 
C key: 1 name: "LUucy 1} 
Tkey2 2 name: Tom yr 
TC key: 37 

]; 


name: Jerry 7 
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const pagination = { pageSize: 2 }; 
// 创建 表格 
function createTable(props) { 
return ( 
<Table 
columns={columns} 
datasource={data} 
pagination={pagination} 
Lepropst 
/> 
); 
// 表格 查找 
function renderedNames (wrapper) { 
return wrapper.find('TableRow') .map (row => row.props() .record.name); 


it('paginate data', () => { 
const wrapper = mount (createTable()); 


// 表格 内 容 测试 

expect (renderedNames (wrapper)) .togqual(['Jack', ‘'Lucy']); 
wrapper.find('Pager') .last () .simulate('click'); 

expect (renderedNames (wrapper)) .toEqual (['Tom', 'Jerry']); 


Ds 
通过 触发 最 后 一 页 的 click 事件 达到 页 面 改变 ， 去 判断 table 中 泻 染 的 数据 是 否 符合 预期 。 


it('repaginates when pageSize change', () => { 
const wrapper = mount (createTable()); 


wrapper.setProps({ pagination: { pageSize: 1 } }); 
expect (renderedNames (wrapper)) .togqual (['Jack']); 
和 


这 是 直接 用 setProps 操作 了 pagination 参数 ， 再 去 判断 table 中 泻 染 的 数据 是 否 符合 预期 。 


it('fires change event', () => { 
const handleChange = jest.fn(); 
const noop = (0 => (1 
const wrapper = mount (createTable ({ 
pagination: { ...pagination, onChange: noop, onShowSizeChange: noop }, 
onChange: handleChange, 
1)); 
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wrapper.find('Pager') .last() .simulate('click'); 


expect (handleChange) .toBeCalledWith( 
{ 
current: 2, 
onChange: noop, 
onShowSizeChange: noop, 
pageSize: 2, 
}, 


0 
); 
]) 7 


触发 click 事件 ， 断 言 handleChange 是 否 以 预期 参数 被 调用 。 


it('should display pagination as prop pagination changed', () => { 
const wrapper = mount (createTable()); 
expect (wrapper.find('.ant-pagination')) .toHaveLength (1); 
expect (wrapper.find('.ant-pagination-item')) .toHaveLength (2); 
wrapper.setProps({ pagination: false }); 
expect (wrapper.find(' .ant-pagination')) .toHaveLength (0); 
wrapper.setProps({ pagination }); 
expect (wrapper.find(' .ant-pagination')) .toHaveLength(1) 7 
expect (wrapper.find(' .ant-pagination-item')) .toHaveLength(2) 7 
wrapper.find(' .ant-pagination-item-2') .simulate('"click')7 
expect (renderedNames (wrapper)) .toEqual (["Tom'， 'Jerry']); 
wrapper.setProps({ pagination: false }); 
expect (wrapper.find(' .ant-pagination')) .toHaveLength (0); 
wrapper.setProps({ pagination: true }); 
expect (wrapper.find(' .ant-pagination')) .toHaveLength (1); 
expect (wrapper.find('.ant-pagination-item')) .toHaveLength (1); // pageSize 
will be 10 
expect (renderedNames (wrapper)) .toEgqual(['Jack', 'Lucy', 'Tom', 'Jerry']); 
3 
1); 


先 判 断 泻 染 结果 中 的 子 节点 .ant-pagination、.ant-pagination-item 数量 是 否 符合 预期 ， 以 达 
到 泻 染 分 页 情况 是 否 正确 的 判断 ， 然 后 通过 setProps 操作 pagination 参数 判断 子 节点 是 否 符合 
预期 。 

从 以 上 案例 也 可 看 出 ， 断 言 时 既 可 以 通过 获取 props0、state0 中 的 数据 来 判断 是 否 符合 预 
期 ， 也 可 以 先 通过 dom selector 查询 找到 特定 节点 再 通过 text0) 接 口 拿 到 数据 来 判断 是 否 符合 
预期 。 
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3. 功能 函数 测试 

功能 函数 的 测试 除了 测试 普通 的 工具 函数 ， 还 需要 测试 函数 调用 、 传 入 特定 参数 的 调用 ， 
判断 函数 返回 值 是 否 符合 预期 。 需 要 注意 的 也 是 全 面 性 ,保证 函数 的 每 个 逻辑 判断 都 能 在 所 有 
测试 案例 跑 完 后 被 覆盖 到 。 

这 时 纯 函 数 和 函数 式 编程 的 优势 就 体现 出 来 了 一 一 纯 函数 方便 测试 。 对 于 使 用 Redux 的 
项 目 ， 比 较 特殊 的 是 action、reducer 函数 的 测试 。 


(1) action 
action 其 实 也 是 调用 函数 判断 返回 值 是 否 符合 预期 ， 例 如 : 


export function addTodo (text) { 
return { 
type: 'ADD TODO', 
text 


} 
测试 代码 为 : 


import * as actions from '../../actions/TodoActions' 
import * as types from '../../constants/ActionTypes' 


descripbe('actions', () => { 
it('should create an action to add a todo', () => { 
const text = 'Finish docs' 
const expectedAction = { 
type: types.ADD ToDO, 
text 
} 
expect (actions.addTodo (text)) .toEqual (expectedAction) 
1 
} 


异步 action 的 测试 需要 借助 第 三 方 库 configureMockStore 进行 ， 将 redux-thunk 异步 中 间 
件 传 入 configureMockStore， 获 得 封装 后 的 store.dispatch 来 派发 action。 测 试 代码 为 : 

import configureMockStore from 'redux-mock-store' 

import thunk from 'redux-thunk' 

import * as actions from '../../actions/TodoActions' 


import * as types from '../../constants/ActionTypes' 


import nock from "nock'" 


const middlewares = [ thunk ] 


const mockStore = configureMockStore (middlewares) 
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describe('async actions', () => 1{ 
afterEach(() => { 
nock.cleanAaAll () 
}) 


it('creates FETCH TODOS SUCCESS when fetching todos has been done', ()=>{ 
nock('http://example.com/') 
.get ('/todos') 
.reply(200, { body: { todos: ['do something'] }}) 


const expectedActions = [ 

{ type: types.FETCH TODOS REQUEST }, 

{ type: types.FETCH TODOS SUCCESS, body: { todos: ['do something'] }} 
] 


const store = mockStore({ todos: [] }) 


return store.dispatch (actions .fetchTodos () ) 
-then (() => { // 异步 actions 的 返回 
expect (store.getActions()) .toEqual (expectedActions) 
jy) 
的 
}) 


一 异步 的 测试 案例 一 定 要 返回 异步 promise, retum 不 能 丢 , 这 样 才能 让 Jest 明 人 | 
e 步 过 程 ， 它 才 会 去 等 待 异 步 执行 结 果 ， 否 则 会 立即 触发 expect 断言 导致 测试 失败 。 


(2) mock 
很 多 对 于 测试 没有 价值 的 东西 可 以 mock 掉 ， 不 会 影响 测试 的 准确 性 。 对 于 一 个 React 组 
件 ， 测 试 这 个 组 件 时 并 不 需要 关心 注入 它 的 action 函数 的 行为 ， 所 要 做 的 是 特定 场景 下 action 
函数 被 正确 调用 ， 调 用 结果 则 是 action 函数 的 单元 测试 该 验证 的 事 。 例 如 ， 可 以 定义 const 
handler = jest.fn(), 后 续 可 以 通过 expect(handler).toBeCalled0 检 查 mock 的 函数 是 否 如 期 被 调用 ， 
expect(handler).toBeCalledWith('arg') 检 查 mock 函数 调用 时 传 入 的 参数 是 否 是 arg 等 。 
诸如 css\image 等 与 逻辑 测试 无 关 的 资源 文件 可 以 在 packagejson 中 的 配置 里 被 统一 mock 


掉 : 
wiest mf 


"moduleNameMapper": { 


"\\. (jpgljpeglpnglgifleotlotflwebplsvglttflwofflwoff21mp41webmlwavlmp31m4alaac 
loga) $": "<rootDir>/spec/_ mocks /fileMock.js", 


™\\.(csslscss)$": "<rootDir>/spec/_ mocks /styleMock.js", 
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"component path$": "<rootDir>/src/components", 
"root path$": "<rootDir>/src" 
} 
} 


import 时 就 不 会 真 的 引入 这 些 对 于 测试 无 用 的 文件 了 。 

我 们 并 不 想 在 测试 时 真 的 去 发 一 个 请 求 , 一 方面 是 会 耗 时 很 长 , 另 一 方面 可 能 会 用 测试 数 
据 污染 线 上 数据 库 , 所 以 我 们 需要 mock 掉 真正 的 HTTP 请 求 , 模拟 返回 值 。 不 用 担心 不 准确 ， 
只 用 保证 请 求 时 的 参数 符合 期 望 、mock 的 返回 值 按 预期 编写 就 好 ， 至 于 这 些 请 求 是 否 真 的 能 
返回 这 些 结果 交 给 接口 测试 处 理 即 可 。 手 动 mock 请 求 效率 实在 太 低 ， 所 以 我 们 需要 一 个 组 件 
直接 拦截 掉 所 有 请 求 ， 无 须 改变 项 目 代 码 ， 传 入 所 需 mock 的 返回 值 ， 组 件 封 装 成 请 求 的 返回 
值 后 ， 直 接 返 回 给 测试 代码 。 

首先 封装 一 个 统一 的 mock 方法 : 


Const fetchMock = require('fetch-mock'); 


import {t HOST } Erom. Me. /sre/util/api. is 


export function mockRequest (path, res){ 
let reg = new RegExp(“ ${HOST}$ {path}.**); 
return fetchMock.get( reg, { 
body: { 
status:{ 
code: "0"， 
detail: "成 功 "， 
msg: "success" 
}, 
Fesult: es 
}, 
status: 200 
}) 
} 


调用 方法 如 下 : 


import { mockRequest } from '../mockRequest.js'; 
import { multiData } from './mockModuleData.js'; 


describe('DataEdit render', () => { 
afterEach (fetchMock.restore) 
it('renders DataEdit correctly', () => { 
mockRequest ('/pageModule/getData', multiData); 
return wrapper.node.fetchData (moduleInfo.moduleId) .then(()=>{ 
expect (toJson (wrapper)) .toMatchsnapshot (); 
[a 
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}) 


测试 之 外 


10.4.1 PropTypes 
PropTypes 定义 为 组 件 类 自身 的 属性 ， 用 以 定义 prop 的 类 型 。 在 开发 模式 下 ， 当 提供 一 个 
合法 的 值 作为 prop 时 , 控制 台 会 出 现 警告 ; 在 产品 模式 下 , 为 了 性 能 考虑 应 忽略 PropTypes。 
例如 : 


import React from 'react' 
class Son extends React.Component { 
render(){ 
return (<div style ={{padding:30}}> 
{this.props.number} 
<br/> 
{this.props.array} 
<br/> 
{this.props.boolean.tostring ()} 
</div>) 
} 


} 
class Father extends React.Component { 
render(){ 
return (<Son 
number = {'1°'} 
arravi = {L273 
boolean = {'true'} 
/>) 
} 
} 


在 这 个 示例 中 , 我 们 通过 从 父 组 件 向 子 组 件 传递 属性 ， 原 本 试图 通过 数值 、 阵 列 和 布尔 这 
三 个 属性 分 别 向 子 组 件 中 传递 一 个 数字 、 数 组 和 一 个 布尔 型 数值 , 但 是 由 于 失误 把 它们 都 写成 
了 字符 串 ， 虽 然 泻 染 是 正常 的 ,但 是 这 可 能 会 导致 接 下 来 调用 一 些 方法 的 时 候 发 生 错误 ， 而 系 
统 并 不 提供 任何 提示 。 

下 面 让 我 们 给 它 加 上 PropTypes 的 类 型 检测 : 

import React from 'react" 

import PropTypes from 'prop-types'; 
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class Son extends React.Component{ 
render (){ 
return (<div style ={{padding:30}}> 
{this.props.number} 
<br/> 
{this.props.array} 
<br/> 
{this.props.boolean.tostring ()} 
</div>) 


} 

Son.propTypes = { 
number:PropTypes.number, 
array:PropTypes.array, 
boolean:PropTypes .bool 


} 
class Father extends React.Component{ 
render(){ 
return (<Son 
number = {'1°'} 
array = {tr2r3I 
boolean = {'true'} 
/>) 
} 
} 


然后 我 们 就 能 看 到 报 的 错误 了 , 而 且 这 个 时 候 报 的 错误 包括 错误 的 道具 属性 名 称 、 错误 的 
变量 类 型 、 属 性 所 在 的 组 件 名 称 、 预 期 正确 的 变量 类 型 、 错 误 代 码 的 位 置 以 及 其 他 更 详细 的 信 
息 ， 如 图 10-5 所 示 。 


OF vv © Presevelog 
blog Regex ” Hidenetwork 加 Hi 


© Warrdng: Sailedprcon type: Invalid prop\ 
二 存在 错误 的 
- nh Pather™( Ereafed Hy RouterContext) L 
错误 代码 in RouterContext (created by Router) props 属 性 鲁 训 的 变量 类 型 属性 所 在 的 组 件 
的 位 置 in Router (at index.js:46) 
jn Provider (at index,js:45) 
© *warning; Failed prop type: Invalid prop `array”of type “string™ supplied to “Son ，expected "array`. 
in Son (at blog,js:21) 
in Father (created by RouterContext) 
in RouterContext (created by Router) 
in Router (at index.js:46) 
jn Provider (at index,js:45) 
© pWarning: Failed prop type: Invatid prop “bootean” of type “string”supptied to “Son*, expected “`bootean ， 
in Son (at blog.js:21) 
了 ed 


violations Al EZ) wamnos no Logs 


er of typevstring supplied th Son 


图 10-5 ”通过 ProTypes 进行 类 型 检测 


PropTypes 能 用 来 检测 全 部 数据 类 型 的 变量 ， 包 括 基 本 类 型 的 字符 串 、 布 尔 值 、 数 字 以 及 
引用 类 型 的 对 象 、 数 组 、 函 数 ， 甚 至 还 有 ES6 新 增 的 符号 类 型 。React.PropTypes 输出 一 系列 
的 验证 器 ， 用 以 确保 收 到 的 数据 是 合法 的 。 如 下 示例 记录 了 不 同 的 验证 器 : 


MyComponent .propTypes = { 
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// 可 以 声明 prop 是 特定 的 Js 基本 类 型 
// 默认 情况 下 这 些 prop 都 是 可 选 的 
optionalArray:PropTypes.array, 
optionalBool: PropTypes.bool, 
optionalFunc: PropTypes.func, 
optionalNumber: PropTypes .number, 
optionalObject: PropTypes.object, 
optionalString: PropTypes.string, 
optionalSymbol: PropTypes.symbol, 


// 任何 可 以 被 泻 染 的 事物 : numbers， strings，elements or an array 
// (or fragment) containing these types. 
optionalNode: PropTypes.node, 


// A React element. 
optionalElement: PropTypes.element, 


// 声明 一 个 prop 是 某 个 类 的 实例 ， 用 到 了 Js 的 instanceof 运算 符 


optionalMessage: PropTypes.instanceOf (Message), 


// 用 enum 来 限制 prop 只 接受 特定 的 值 
optionalEnum: PropTypes.oneOof(['News', 'Photos']), 


// 指定 的 多 个 对 象 类 型 中 的 一 个 

optionalUnion: PropTYPes .oneOofType([ 
PropTypes.string, 
PropTypes .number, 
PropTypes.instanceoOf (Message) 

yn 


// 指定 类 型 组 成 的 数组 
optionalRArrayOf: PropTypes.arrayof (PropTypes.number), 


// 指定 类 型 的 属性 构成 的 对 象 
optionalObjectOf: PropTypes.objectoOf (PropTypes.number), 


// 一 个 指定 形式 的 对 象 
optionalobjectwithShape: PropTypes.shape({ 
color: PropTypes.string, 
fontSize: PropTypes.number 
})， 


// 你 可 以 用 以 上 任何 验证 器 链接 “isRequired”， 以 确保 prop 不 为 空 
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requiredFunc: PropTypes.func.isRequired, 


// 不 可 空 的 任意 类 型 
requiredAny: PropTypes.any.isRequired, 


// 自 定义 验证 器 ， 如 果 验 证 失败 ， 必 须 返回 一 个 Error 对 象 
// 不 要 直接 使 用 console .warn 或 者 throw， 这 些 在 oneofType 中 都 没 用 
customProp: function (props, propName, componentName) { 
if (!/matchme/.test (props[propName])) { 
return new Error( 
"Invalid prop “' + propName + '* supplied to' + 
' *' + componentName + '‘. Validation failed."' 
a 
} 
}, 


// 你 也 可 以 为 arrayof 和 objectof 提供 一 个 验证 器 
// 如 果 验 证 失败 ， 它 也 应 该 返回 一 个 Error 对 象 
// 在 array 或 者 object 中 ， 验 证 器 对 于 每 个 key 都 会 被 调用 The first two 
// 验证 器 的 前 两 个 arguments 是 array 或 者 object 自身 以 及 当前 的 key 值 
customArrayProp: PropTypes.arrayof (function (propValue, key, componentName, 
location, propFullName) { 
if (!/matchme/.test (propValue[key])) { 
return new Errorl( 
"Invalid prop ‘' + propFullName + '. supplied to' + 
'*' + componentName + '“. Validation failed.' 
) 7 
} 
}) 
] 7 


可 以 使 用 React PropTypes.element 指定 仅 可 以 将 单一 子 元 素 作为 子 节点 传递 给 组 件 。 


class MyComponent extends React.Component { 
render() { 
// This must be exactly one element or it will warn. 
const children = this.props.children; 
return ( 
<div> 
{children} 
</div> 
人 六 
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MyComponent .propTypes = { 
children: PropTypes.element.isRequired 
] 7 


通过 赋值 特殊 的 defaultProps 属性 ， 可 以 为 props 定义 默认 值 : 


class Greeting extends React.Component { 
render() { 
return ( 
<hl>Hello, {this.props.name}</hl> 
) 7 
} 
} 


// Specifies the default values for props: 
Greeting.defaultProps = { 

name: 'Stranger'" 
]7 


// Renders "Hello, Stranger": 
ReactDOM.render( 

<Greeting />, 

document .getElementById('example') 
) 7 
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如 果 父 组 件 没 有 为 this.props.name 传 值 ， 那 么 defaultProps 会 给 其 一 个 默认 值 。PropTypes 
的 类 型 检测 是 在 defaultProps 解析 之 后 发 生 的 ， 因 此 也 会 对 默认 属性 defaultProps 进行 类 型 检 


10.4.2 Flow 


Flow 本 质 上 只 是 一 个 检查 工具 ， 并 不 会 自动 修正 代码 中 的 错误 ， 也 不 会 强制 说 你 没有 按 


照 它 的 警告 消息 修正 ， 只 是 不 会 让 程序 运行 而 已 。 当 然 ， 并 没有 要 求 什么 时 候 一 定 要 用 这 类 工 
以 让 你 的 代码 更 具 强 健 性 并 提高 阅读 性 , 也 可 以 直接 避 去 很 多 不 必要 的 数 


据 类 型 使 用 上 的 问题 。 这 种 开发 方式 目前 在 许多 框架 与 函数 库 项 目 或 是 以 JavaScript 应 用 为 主 


的 开发 团队 中 都 已 经 是 必用 的 了 。 


JavaScript 是 一 种 弱 (动态) 数据 类 型 的 语言 ， 弱 〈 动 态 ) 数据 类 型 代表 在 代码 中 ， 变 量 
常量 会 自动 依照 赋值 变更 数据 类 型 ,而 且 类 型 种 类 也 很 少 。 这 是 直译 式 脚 本 语言 的 常见 特性 ， 


但 既 有 可 能 是 优点 也 有 可 能 是 很 大 的 缺点 。 优 点 是 容易 学 习 与 使 用 , 缺点 是 开发 者 经 常会 因为 


赋值 或 传 值 的 类 型 错误 而 造成 不 如 预期 的 结果 。 有 些 时 候 在 使 用 框架 或 函数 库 时 , 如 果 没 有 仔 


细 看 文件 ， 或 者 文件 写 得 不 清楚 ， 也 容易 造成 误 用 的 情况 。 
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(1) 首先 ， 通 过 npm 安装 Flow: 
npm install --save-dev flow-bin 


(2) 初始 化 项 目 : 


flow init 


通常 在 代码 的 最 顶部 一 行 加 入 声明 〈 没 加 的 话 ，Flow 工具 是 不 会 进行 检查 的 ) ， 


种 格式 都 可 以 : 
// flow 
或 
/* @flow */ 
可 以 使 用 下 面 的 命令 指令 来 进行 代码 检查 : 
flow check 
例如 ， 如 下 代码 : 


function foo(x) { 


return x + 10 
} 


foo('Hello!') 
利用 Flow 类 型 的 定义 方式 ， 可 以 改写 为 下 面 这 样 的 代码 : 


// Qflow 


function fool(x: number): number { 
return x + 10 
} 


foo('hi') 


以 下 两 


可 以 看 到 , 在 函数 的 传 参 以 及 函数 的 圆 括号 (O) 后 面 的 两 个 地 方 都 加 了 :number 标记 , 代表 


这 个 传 参 会 限定 为 数字 类 型 ， 并 且 返 回 值 也 只 允许 是 数字 类 型 。 


当 使 用 非 数字 类 型 的 值 作 为 传 入 值 时 ， 就 会 出 现 由 Flow 工具 发 出 的 警告 消息 : 


message: ' [flow] string (This type is incompatible with number See also: function 


be 


如 果 是 要 允许 多 种 类 型 ， 也 是 很 容易 加 标记 的 。 例 如 ， 某 一 函数 可 以 使 用 布尔 或 数字 类 型 


的 入 参 ， 出 参 的 类 型 可 以 是 数字 或 字符 串 : 


// eflow 
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function foo(x: number | boolean): number | string { 


} 


if (typeof x === "number') { 


return X + 10 


} 


return "X is boolean' 


foo(1) 
foo (true) 


foo (null) // 这 一 行 有 类 型 错误 消息 


如 果 在 多 人 协同 开发 某 个 有 规模 的 JavaScript 应 用 时 ,这 种 类 型 的 输出 输入 问题 就 会 很 常 


问 


。 如 果 利用 Flow 工具 进行 检查 ， 就 可 以 避免 掉 许 多 不 必要 的 类 型 问题 。 


Flow 支持 的 原始 数据 类 型 包括 以 下 几 项 : 


boolean 
number 
string 
null 
void 


其 中 的 void 类 型 就 是 JS 中 的 undefined 类 型 。 需 要 注意 的 是 ， 在 JS 中 ，undefined 与 null 
的 值 会 相等 但 类 型 不 同 ， 意 思 是 做 值 相等 比较 时 ， 比 如 undefined 一 null 时 会 为 tue。 有 时 在 
运行 期 间 的 检查 时 ， 可 能 会 用 值 相等 比较 而 不 是 严格 的 相等 比较 来 检查 这 两 个 类 型 的 值 。 


10.4.3 TypeScript 
TypeScript 是 JavaScript 的 超 集 并 且 能 够 编译 输出 为 纯粹 的 JavaScript， 安 装 方法 如 下 : 


npm install -g typescript 


我 们 需要 一 个 tsconfigjson 文件 来 告诉 ts-loader 如 何 编译 TypeScript 代码 。 在 当前 根 目录 
下 创建 tsconfigjson 文件 ， 并 添加 如 下 内 容 : 


{ 


"compileroptions": { 


outDir neadlstr 
"sourceMap": true, 
"noImplicitAny": true, 
"module": "commonjs", 
"target": "es5"， 


a 玫 世 Ga 人 贡 
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其 中 : 

@ outDir: 输出 目录 。 

@ sourceMap: 把 ts 文件 编译 成 js 文件 的 时 候 ， 同 时 生成 对 应 的 sourceMap 文件 。 

@ noImplicitAny: 如 果 为 true， 当 TypeScript 编译 器 无 法 推断 出 类 型 时 ， 它 就 会 生成 


JavaScript 文件 ， 但 是 会 报告 一 个 错误 。 为 了 找到 错误 ， 还 是 设置 为 true 比较 好 。 
module: 代码 规范 ， 也 可 以 选 amd。 

target: 转换 成 es5。 

jsx: TypeScript 具有 三 种 JSX 模式 ， 即 preserve、react 和 react-native。 这 些 模式 只 在 
代码 生成 阶段 起 作用 ( 类 型 检查 并 不 受 影响 ) 。 在 preserve 模式 下 ， 生 成 代码 中 会 保 
留 JSX， 以 供 后 续 的 转换 操作 使 用 (比如 : Babel) 。 另 外 ， 输 出 文件 会 带 有 .jsx 扩展 
名 。react 模式 会 生成 React.createElement， 在 使 用 前 不 再 需要 进行 转换 操作 ， 输 出 文 
件 的 扩展 名 为 .js。 react-native 相当 于 preserve， 也 保留 了 所 有 的 JSX, 但 是 输出 文件 
的 扩展 名 是 js。 我 们 这 里 因为 不 会 用 Babel 再 转 ， 所 以 用 react 就 行 。 

include: 需要 编译 的 目录 。 


在 编辑 器 中 ， 将 下 面 的 代码 输入 到 greeter.ts 文件 里 : 


function greeter (person) { 


} 


et 


return "Hello, " + person; 


user = "Jane User"; 


document .body.innerHTML = greeter (user); 


上 


而 虽然 使 用 了 .ts 扩展 名 ， 但 是 这 段 代 码 仅 仅 是 JavaScript 而 已 。 在 命令 行 上 ， 运 行 


TypeScript 编译 器 : 
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greeter.ts 


输出 结果 为 一 个 greeterjs 文件 , 包含 了 和 输入 文件 中 相同 的 JavaScript 代码 。 一 切 准备 就 
绪 ， 我 们 可 以 运行 这 个 使 用 TypeScript 写 的 JavaScript 应 用 了 。 
接 下 来 看 看 TypeScript 工具 带 来 的 高 级 功能 。 
【示例 10-8 : string 类 型 注解 】 
给 person 函数 的 参数 添加 : string 类 型 注解 : 


function greeter (person: string) { 


return Hellon PersoOnx 
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let user = "Jane User"7 


document .body.innerHTML = greeter (user); 


TypeScript 里 的 类 型 注解 是 一 种 轻 量 级 的 为 函数 或 变量 添加 约束 的 方式 。 在 这 个 例子 里 
我 们 希望 greeter 函数 接收 一 个 字符 串 参数 。 然 后 尝试 把 greeter 的 调用 改 成 传 入 一 个 数组 : 


function greeter(person: string) { 


return “Hello, " + person; 


let user = [0, 1, 2]; 


document .body.innerHTML = greeter (user); 

重新 编译 ， 会 看 到 产生 了 一 个 错误 : 

error TS2345: Argument of type 'number[]' is not assignable to parameter of type 
strings 

类 似 地 ,尝试 删除 greeter 调用 的 所 有 参数 。TypeScript 会 告诉 你 使 用 非 期 望 个 数 的 参数 调 

了 这 个 函数 。 在 这 两 种 情况 中 ，TypeScript 提供 了 静态 的 代码 分 析 ， 可 以 用 来 分 析 代码 结构 
和 提供 的 类 型 注解 。 

要 注意 的 是 尽管 有 错误 ，greeterjs 文件 还 是 被 创建 了 。 就 算 你 的 代码 里 有 错误 ， 也 仍然 可 
以 使 用 TypeScript， 但 在 这 种 情况 下 TypeScript 会 警告 你 代码 可 能 不 会 按 预期 执行 。 

接着 ， 创 建 目录 ， 


mkdir src && cd src 


mn 


mkdir components && cd components 


在 此 文件 夹 下 添加 一 个 Hello.tsx 文件 ， 代 码 如 下 : 


import * as React from 'react'; 


export interface Props { 
name: string; 
enthusiasmLevel?: number; 
} 


export default class Hello extends React.Component<Props, object> { 
render() { 


const { name, enthusiasmLevel = 1 } = this.props; 
if (enthusiasmLevel <= 0) { 


throw new Error('You could be a little more enthusiastic. :D'); 
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} 
return ( 
<div className="hello"> 
<div className="greeting"> 
Hello {name + getExclamationMarks (enthusiasmLevel)} 
</div> 
</div> 
); 


function getExclamationMarks (numChars: number) { 
return Array (numChars + 1).join('!'); 
} 


接 下 来 ， 在 src 下 创建 index.tsx 文件 ， 代 码 如 下 : 


import * as React from "react"; 
import * as ReactDOM from "react-dom"; 
import Hello from "./components/Hello"; 


ReactDOM.render( 
<Hello name="TypeScript" enthusiasmLevel={10} />, 
document .getElementById('root') as HTMLElement 


我 们 还 需要 一 个 页 面 来 显示 Hello 组 件 。 在 根 目录 创建 一 个 名 为 index.html 的 文件 ， 代 码 
如 下 : 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8" /> 
<title>demo</title> 
</head> 
<body> 
<div id="root"></div> 
<script src="./dist/bundle.js"></script> 


</body> 

</html> 

在 根 目录 下 创建 一 个 名 为 webpack.common.configjs 文件 ， 并 添加 如 下 内 容 : 
module.exports = { 


entry: "./src/index.tsx", 


output: { 
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在 根 目录 下 运行 以 下 命令 : 
webpack --config webpack.commonconfig js 
打开 index.html 就 能 进行 调试 了 。 
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< 性 能 优化 > 


前 端 资源 包括 HIML、CSS、Javascript、Image、Video 等 多 种 不 同类 型 的 资源 。 前 端 性 
能 优化 的 目的 是 让 页 面 加 载 得 更 快 、 对 用 户 的 操作 响应 得 更 及 时 、 给 用 户 提供 更 为 友好 的 体验 ， 
同时 优化 能 够 减少 页 面 请 求 数 或 者 减 小 请 求 所 占 带 宽 , 能 够 节省 可 观 的 资源 。 总 之 , 提升 用 户 
体验 是 核心 目标 。 前 端 针 对 不 同类 型 的 资源 分 别 都 有 不 同 的 性 能 优化 方式 。 


不 要 过 早 优化 


性 能 优化 思路 大 致 如 图 11-1 所 示 。 


诊断 叫 > 


使 用 工具 来 分 析 性 能 瓶 开 。 尝试 使 用 优化 技巧 解决 问题 。 “使 用 工具 测试 性 能 是 否 确实 有 提升 
图 11-1 性 能 优化 流程 

不 要 将 性 能 优化 的 精力 浪费 在 对 整体 性 能 提高 不 大 的 代码 上 ， 而 对 性 能 有 关键 影响 的 部 
分 ， 优 化 并 不 嫌 早 ， 因 为 对 性 能 影响 最 关键 的 部 分 往往 涉及 解决 方案 核心 、 决 定 整体 的 架构 ， 
将 来 要 改变 的 时 候 牵 扯 更 大 。 

React 利用 虚拟 DOM 来 提升 泻 染 性 能 。 虽 然 每 一 次 页 面 更 新 都 是 对 组 件 的 重新 泻 染 ， 但 
是 并 不 是 将 之 前 的 泻 染 内容 全 部 抛弃 重 来 ,借助 虚拟 DOM, React 能 够 计算 出 对 DOM 树 的 最 
少 修改 ， 这 就 是 React 默认 情况 下 泻 染 都 很 迅速 的 秘诀 。 

虽然 虚拟 DOM 能 够 将 每 次 DOM 操作 量 减 少 到 最 小 ， 但 计算 和 比较 虚拟 DOM 依然 是 一 
个 复杂 的 过 程 。 当 然 ， 如 果 能 够 在 开始 计算 虚拟 DOM 之 前 就 判断 泻 染 的 结果 不 会 有 变化 ， 那 
么 就 可 以 不 进行 虚拟 DOM 计算 和 比较 ， 速 度 就 会 更 快 。 
shouldComponentUpdate 优化 在 图 中 去 掉 了 许多 目 坑 ， 并 减少 了 整体 泻 染 时 间 。 用 同样 的 
方法 可 以 避免 更 多 的 重 绘 〈 例 如 避免 重 绘 sidebar、 操 作 按 钮 、 没 有 变化 的 表 头 和 页 码 ) ， 但 
是 别 到 处 都 加 shouldComponentUpdate ， 在 简单 组 件 上 执行 shouldComponentUpdate 方法 有 
时 比 仅 泻 染 组 件 要 耗 时 。 也 别 在 应 用 的 早期 使 用 ， 这 将 过 早 地 进行 优化 。 随 着 应 用 的 壮大 ,我 
们 会 发 现 组 件 上 的 性 能 瓶颈 ， 此 时 添加 shouldComponentUpdate 逻辑 能 保持 快速 地 运行 。 
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React 性 能 查看 工具 


在 讲 性 能 优化 之 前 ， 我 们 需要 先 来 了 解 一 下 如 何 查 看 React 加 载 组 件 时 所 耗费 时 间 的 了 
具 ， 在 React 16 版 本 之 前 ， 我 们 可 以 使 用 React Perf 来 查看 。Perf 是 React 官方 提供 的 性 能 


析 工 具 。Perf 最 核心 的 方法 莫 过 于 PerfprintWasted(measurements)， 该 方法 会 列 出 那些 没 必要 


的 组 件 泻 染 。 在 很 大 程度 上 ，React 的 性 能 优化 就 是 除 掉 这 些 无 谓 的 泻 染 。 


应 的 代码 : 


import {createstore, combineReducers, applyMiddleware, compose} from 'redux' 


import {reducer as todoRedcer} from './todos'; 
import {reducer as filterReducer} from './filter'; 


import Perf from 'react-addons-perf'; // 性 能 工具 


const win = window; 
win.Perf = Perf; 
// reducer 组 合 
const reducer = combineReducers ({ 
todos: todoReducer, 
filter: filterReducer 
1); 
// 中 间 件 组 合 
const middlewares = []; 
if (process.env.NODE ENV !== 'production') { 
middlwwares.push (require ('redux-immutable-state-invariant') ()); 
} 
// 创建 store 
const storeEnhancers = Compose( 
applyMiddleware(...middlewares), 
(win && win.devToolsExtension) ? win.devToolsExtension() : (f) => f, 
) 


[以 在 Chrome 中 先 安装 React Perf 扩展 , 然后 在 入 口 文 件 或 者 Redux 的 store.js 中 加 入 相 


了 


在 React 16 版 本 中 , 直接 在 url 后 加 上 ”?react_ pref”, 就 可 以 在 Chrome 浏览 器 的 performance 


中 利用 User Timeing 来 查看 组 件 的 加 载 时 间 ， 如 图 11-2 所 示 。 
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六 网 


This page is using the development build of React. 缀 
Open the developer tools, and the React tab will appear to the right. 


| 
| Note that the development build is not suitable for production. 
Make sure to use the production build before deployment. 


A 


全 
|。 
外 


图 11-2 Chrome React 插件 


React 优化 手段 


11.3.1 单个 React 组 件 性 能 优化 
一 般 来 说 ， 要 尽 可 能 少 地 在 render 函数 中 做 操作 。 


render 里 | 


尽量 减少 新 建 变量 和 bind 函数 ， 尽 量 减少 所 需 传递 参数 的 数量 ， 尽 可 能 地 保 


持 props 和 state 简单 和 精简 。 

例如 ， 单 击 事件 有 3 种 实现 方法 : 

@ 第 一 种 是 在 构造 函数 中 绑 定 this。 

@ 第 二 种 是 在 render() 函 数 里面 绑 定 this。 

@ 第 三 种 就 是 使 用 箭头 函数 。 

这 3 种 方法 都 能 实现 ， 构 造 函 数 每 一 次 泻 染 的 时 候 只 会 执行 一 遍 。 在 render0 函 数 里 面 绑 
定 this， 在 每 次 render() 的 时 候 都 会 重新 执行 一 遍 函 数 。 采 用 第 三 种 方法 ， 每 一 次 render() 的 时 
候 都 会 生成 一 个 新 的 箭头 函数 ， 即 使 两 个 箭头 函数 的 内 容 是 一 样 的 。React 使 用 浅 层 比 较 判 断 
是 否 需 要 触发 render， 简 单 来 说 就 是 通过 = 一 来 判断 ， 如 果 state 或 者 prop 的 类 型 是 字符 串 或 
者 数字 ， 只 要 值 相同 ， 那 么 浅 层 比较 就 会 认为 其 相同 ; 如果 前 者 的 类 型 是 复杂 的 对 象 ( 对 象 是 
引用 类 型 ) ， 那 么 浅 层 比较 只 会 判断 这 两 个 prop 是 不 是 同一 个 引用 ， 如 果 不 是 ， 哪 怕 这 两 个 
对 象 中 的 内 容 完全 一 样 ， 也 会 被 认为 是 两 个 不 同 的 prop。 

我 们 给 组 件 Foo 中 名 为 style 的 prop 赋值 : 


<Foo style={{ color:"red" }} 


使 用 这 种 方法 ， 因 为 每 一 次 泻 染 都 会 产生 一 个 新 对 象 传递 给 style， 所 以 每 一 次 演 染 都 会 
被 认为 是 style 这 个 prop 发 生 了 变化 。 

那么 我 们 应 该 如 何 改进 呢 ? 如 果 想 要 让 React 演 染 的 时 候 认为 前 后 对 象 类 型 prop 相同 ， 
就 必须 保证 prop 指向 同一 个 JavaScript 对 象 ， 例 如 : 


Const fooStyle = { color: "red™ }; 
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// 确 保 这 个 初始 化 只 执行 一 次 ， 不 要 放 在 render 中 ， 可 以 放 在 构造 函数 中 


<Foo style={foostyle} /> 


11.3.2 shoudComponentUpdate 


React 有 一 个 生命 周期 函数 shouldComponentUpdate(), 这 个 方法 可 以 根据 当前 和 下 一 次 的 
props 和 state 来 通知 React 组 件 是 否 应 该 被 重新 泻 染 。shouldComponentUpdate 是 决定 React 
组 件 什么 时 候 能 够 不 重新 泻 染 的 函数 ， 但 是 这 个 函数 默认 的 实现 方式 是 简单 地 返回 一 个 true。 
也 就 是 说 ， 默 认 每 次 更 新 的 时 候 都 要 调用 所 用 的 生命 周期 函数 ， 包 括 render 函数 ， 重 新 泻 染 。 
shouldComponentUpdate 生命 周期 如 图 11-3 所 示 。 


绿色 绿色 红色 绿色 绿色 
绿色 雪 No Reconciliation needed SCU shouldComponentUpdate? 
红色 各 Reconciliation needed vDOMEq are virtual DOMs equivalent? 


图 11-3 shouldComponentUpdate 


其 中 ，SCU 表示 shouldComponentUpdate， 绿 色 表示 返回 tue (需要 更 新 ) ， 红 色 表 示 返 
回 false (不 需要 更 新 ) ; VDOMEq 表示 虚拟 DOM 比 对 ， 绿 色 表 示 一 致 ( 不 需要 更 新 ) ， 红 
色 表 示 发 生 改 变 (需要 更 新 ) 。 根 据 泻 染 流程 ， 首 先 会 判断 shouldComponentUpdate(SCU) 是 
否 需要 更 新 。 如 果 需 要 更 新 , 就 调用 组 件 的 render 生成 新 的 虚拟 DOM, 然后 与 旧 的 虚拟 DOM 
对 比 C(vVDOMEq) , 如 果 对 比 一 致 就 不 更 新 , 如 果 对 比 不 同 , 就 根据 最 小 粒度 改变 去 更 新 DOM; 
如 果 SCU 不 需要 更 新 ， 就 直接 保持 不 变 ， 同 时 其 子 元 素 也 保持 不 变 。 


@ Cl1 根 节点 , 绿色 SCU (tmue) , 表示 需要 更 新 ,然后 VDOMEq 红色 ,表示 虚拟 DOM 
不 一 致 ， 需 要 更 新 。 

@ C2 节点， 红色 SCU (false ) ， 表 示 不 需要 更 新 ， 所 以 C4、C5 均 不 再 进行 检查 。 

C3 节点 同 C1， 需 要 更 新 。 

@ C6 节点 ， 绿 色 SCU (true) ， 表 示 需 要 更 新 ， 然 后 VDOMEq 红色 ， 表 示 虚 拟 DOM 
不 一 致 ， 更 新 DOM。 
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@ C7 节点 同 C2。 
@ C8 节点， 绿色 SCU (tmue) ， 表示 需 要 更 新 ， 然 后 VDOMEq 绿色 ,表示 虚拟 DOM 
一 致 ， 不 更 新 DOML。 


开发 者 必须 考虑 到 需要 触发 重新 泻 染 的 每 一 种 情况 , 这 会 导致 逻辑 复杂 化 , 但 是 很 多 情况 
下 会 有 更 好 的 选择 。 

React 从 V15 开始 包含 了 一 个 PureComponent 类 ， 它 可 以 被 用 来 构建 组 件 。 
React.PureComponent 声明 了 它 自 己 的 shouldComponentUpdate() 方 法 ， 自 动 对 当前 和 下 一 次 的 
props 和 state 做 一 次 浅 对 比 。 在 大 多 数 情 况 下 ，React.PureComponent 是 比 React.Component 
更 好 的 选择 。 在 创建 新 组 件 时 ， 首 先 尝试 将 其 构建 为 纯 组 件 ， 只 有 组 件 的 功能 需要 时 才 使 用 
React.Component。 

还 有 一 些 细节 的 优化 点 : 

@ 慎 用 {..this.props}y ， 只 传递 component 需要 的 props， 传 得 太 多 或 者 层次 传 得 太 深 ， 
都 会 加 重 shouldComponentUpdate 里 面 的 数据 比较 负担 ， 因 此 慎 用 spread attributes 

(<Component {...props} /> ) )。 
:this.handleChange() ， 将 该 方法 的 bind 于 constructor 中 进行 定义 ， 即 
this.handleChange.bind(this,id)。 
复杂 的 页 面 不 要 全 部 写 在 一 个 组 件 里 面 ， 尽 量 拆 分 。 
尽量 使 用 const element。 
map 中 需要 添加 key， 并 且 key 不 要 使 用 index。 
尽量 少 用 setTimeonut 或 不 可 控 的 refs、DOM 操作 。 
props 和 state 的 数据 尽 可 能 简单 明了 ， 扁 平 化 。 
使 用 return null 而 不 是 CSS 的 display:none 来 控制 节点 的 显示 隐藏 ， 保 证 同一 时 间 页 
面 的 DOM 节点 尽 可 能 少 。 


11.3.3 immutable (ImmutableJS) 


我 们 也 可 以 在 shouldComponentUpdate() 中 使 用 deepCopy 和 deepCompare 来 避免 不 必要 的 
render()， 但 deepCopy 和 deepCompare 一 般 都 是 非常 耗 性 能 前 

Immutable Data 就 是 一 旦 创建 就 不 能 再 被 更 改 的 数据 。 对 immutable 对 象 的 任何 修改 或 添 
加 、 删 除 操作 都 会 返回 一 个 新 的 immutable 对 象 。 

immutable 实现 的 原理 是 Persistent Data Structure (持久 化 数据 结构 ) ， 也 就 是 使 用 旧 数 据 
创建 新 数据 时 ， 要 保证 旧 数 据 同时 可 用 且 不 变 。 同 时 为 了 避免 deepCopy 把 所 有 节点 都 复制 一 
遍 带 来 的 性 能 损耗 ，immutable 使 用 了 StructuralSharing (结构 共享 ) ， 即 如 果 对 象 树 中 一 个 节 
点 发 生变 化 ， 只 修改 这 个 节点 和 受 它 影响 的 父 节 点 ， 其 他 节点 则 进行 共享 。 

immutable 提供 了 简洁 高 效 的 判断 数据 是 否 变化 的 方法 ， 只 需 用 一 = 和 is 比较 就 能 知道 是 
否 需 要 执行 render()， 而 这 个 操作 几乎 零 成 本 ， 所 以 可 以 极 大 地 提高 性 能 。 修 改 后 的 
shouldComponentUpdate 如 下 : 
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import { is } from "immutable'7 


shouldComponentUpdate: (nextProps = {}, nextstate = {}) => 1{ 


const thisProps = this.props || {}, thisstate = this.state || {}; 

// 比较 属性 个 数 

if (Object.keys (thisProps) .length !== Object.keys (nextProps) .length 11 
Object .keys (thisstate) .length !== Object.keys (nextState) .length) { 


return true; 


} 
// 对 比 每 个 属性 的 值 ， 不 相等 的 时 候 返 回 true， 表 示 需 要 更 新 
for (const key in nextProps) { 
if (!is(thisProps[key], nextProps[key])) { 
return true; 
} 
} 
// 比较 每 个 属性 ， 且 属性 存在 
for (const key in nextState) { 
if (thisstate[key] !== nextState[key] || !is(thisState [key]， 
nextState[key])) { 
return true; 


} 
return false; 
} 


immutable 是 一 个 完全 独立 的 库 ， 无 论 基于 什么 框架 都 可 以 用 ， 弥 补 了 JavaScript 没有 不 
可 变数 据 结 构 的 问题 。 由 于 是 不 可 变 的 ， 因 此 可 以 放心 地 对 对 象 进行 任意 操作 。 在 React 开发 
中 ， 频 繁 操作 state 对 象 或 是 store ， 配 合 ImmutableJS 会 更 快 、 更 安全 、 更 方便 。 

immutable 的 优点 如 下 : 


(1) immutable 降低 了 Mutable 带 来 的 复杂 度 

可 变 (Mutable) 数据 耦合 了 Time 和 Value 的 概念 ， 使 数据 很 难 被 回溯 。 

(2) 节省 内 存 

immutable.js 使 用 了 Structure Sharing, 会 尽量 复 用 内 存 ， 甚 至 以 前 使 用 的 对 象 也 可 以 再 次 
被 复 用 ， 没 有 被 引用 的 对 象 会 被 垃圾 回收 。 


import { Map} from 'immutable'; 
let a = Mapl({ 


select: 'users', 
filter: Map({ name: "Cam' }) 
}) 
let y=rasetl seloct People 
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a == by // false 
a.get('filter') === b.get ('filter'); // true 


Undo/Redo、Copy/Paste， 甚 至 可 以 实现 时 间 旅 行 这 些 功能 。 
因为 每 次 数据 都 是 不 一 样 的 , 只 要 把 这 些 数据 放 到 一 个 数组 里 储存 起 来 , 想 回 退 到 哪里 就 
拿 出 对 应 数据 ， 很 容易 开发 出 撤销 、 重 做 这 种 功能 。 


(3) 并 发 安全 
传统 的 并 发 非常 难 做 ， 因 为 要 处 理 各 种 数据 不 一 致 的 问题 ,因此 发 明了 各 种 锁 来 解决 。 使 
了 immutable 之 后 ， 数 据 天 生 是 不 可 变 的 ， 就 不 需要 并 发 锁 了 。 


(4) 拥抱 函数 式 编程 


immutable 本 身 就 是 函数 式 编程 中 的 概念 ， 纯 函数 式 编程 比 面向 对 象 更 适用 于 前 端 开 发 。 
因为 只 要 输入 一 致 ， 输 出 必然 一 致 ， 这 样 开 发 的 组 件 更 易于 调试 和 组 装 。 
ImmutableJS 中 有 几 个 重要 的 API， 具 有 如 下 : 


(1) fromJSO 
fromJSO 是 最 常用 的 将 原生 JS 数据 转换 为 ImmutableJS 数据 的 转换 方法 。 使 用 方式 类 似 于 
JSON -parse()， 接 收 两 个 参数 : json 数据 和 reviver 函数 。 
在 不 传递 reviver 函数 的 情况 下 ， 默 认 将 原生 JS 的 Array 转 为 List、Object 转 为 Map: 
// 常见 


const tl = Immutable.fromJS({a: {b: [10，20，30]}，c: 40}); 
console.1og(t1); 


Sp 


// 不 常用 
const t2 = Immutable.fromJs ({a: {b: [10, 20, 30]}, c: 40},function (key, value){ 
// 定制 转换 方式 下 这 种 就 是 将 Array 转换 为 List、object 转换 为 Map 
const isIndexed = Immutable.Iterable.isIndexed (value); 
return isIndexed ? value.toList() : value.toorderedMap () ; 
// true, "b", {b: [10, 20, 30]} 
Ealser “am [as {bs L107 205 3301 Ce AO0F 
uralseoy mw Sm a DD 0 SoM GAD 
3 
console.1og (t2); 


(2) toJSO 

先 来 看 官网 的 一 段 话 : immutable 数据 应 该 被 当 作 值 而 不 是 对 象 ， 值 是 表示 该 事件 在 特定 
时 刻 的 状态 。 这 个 原则 对 理解 不 可 变数 据 的 适当 使 用 是 最 重要 的 。 为 了 将 immutablejjs 数据 视 
为 值 ， 就 必须 使 用 immutable.isO 函 数 或 .equals() 方 法 来 确定 值 相等 ， 而 不 是 确定 对 象 引 用 标识 
的 一 = 操作 符 。 
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toJSO 就 是 用 来 对 两 个 immutable 对 象 进行 值 比较 的 。 使 用 方式 类 似 于 Objectis(objl.obj2)， 
接收 两 个 参数 : 


const mapl = Immutable.Map({a:1l, b:1, c:1}); 
const map2 = Immutable.Map({a:1, b:1, c:1}); 


// 两 个 不 同 的 对 象 
console.1og (mapl === map2); // false 
// 进行 值 比较 


console.1og (Immutable.is (mapl, map2)); // true 


// 不 仅仅 只 能 比较 ImmutableJs 类 型 的 数据 
console.1og(Immutable.is(undefined，undefined) ); // true 
console.1og(Immutable.is(nul1，undefined)); // false 
console.1log (Immutable.is(null, null)); // true 
console.1og (Immutable.is (NaN, NaN)); // true 


// 区 别 于 object.is 
console.1log (Object.is(0, -0) ,Immutable.is(-0, 0)); // false , true 
(3) Map 
Map 数据 类 型 对 应 原生 Object 数组 , 是 最 常用 的 数据 结构 之 一 , 循环 时 无 序 (orderedMap 
有 序 ) ， 对 象 的 key 可 以 是 任意 值 ， 具 体 看 下 面 的 例子 。 


console.1log (Map() .set (List.of(1), 'list-of-one') .get (List.of(1))); 
console.1og (Map () .set (NaN, 'NaN') .get (NaN)); 

console.1og (Map () .set (undefined, 'undefined') .get (undefined)); 
console.1log (Map() .set (null, ‘null') .get (nu11)); 


OrderedMap 是 Map 的 变 体 ， 除了 具有 Map 的 特性 外 ， 还 具有 顺序 性 。 当 开发 者 遍历 
OrderedMap 的 实例 时 ， 遍 历 顺序 为 该 实例 中 元 素 的 声明 、 添 加 顺序 。OrderedMap 比 非 有 序 
Map 更 昂贵 ， 并 且 可 能 消耗 更 多 的 内 存 。 如 果真 要 求 遍 历 有 序 ， 建 议 使 用 List。 

(4) List 

List 数据 类 型 对 应 原生 Array 数组 ， 和 原生 数组 最 大 的 区 别 是 不 存在 空 元 素 ， 如 不 存在 

Esssk 


console.log (List([,,,,]) .toJs()); 
// [undefined, undefined, undefined, undefined] 


人 气 。 性 能 优化 小 结 
本 章 从 代码 级 两 个 粒度 对 React 性 能 优化 的 方式 做 了 一 些 介绍 , 这 些 方法 基本 上 都 是 前 端 


开发 人 员 在 开发 的 过 程 中 可 以 借鉴 和 实践 的 , 除 此 之 外 , 完整 的 前 端 优化 还 应 该 包括 很 多 其 他 
的 途径 ， 例 如 CDN、Gzip、 多 域名 、 无 Cookie 服务 器 等 。 
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<Hooks» 


在 React Conf 2018 中 提出 了 Hooks 这 个 概念 ， 并 在 大 会 上 宣布 React v16.7.0-alpha( 内 测 ) 
将 引入 Hooks， 所 以 我 们 有 必要 了 解 Hooks， 以 及 由 此 引发 的 疑问 。 本 章 让 我 们 一 起 来 详细 讨 
论 Hooks 解决 的 问题 以 及 使 用 方法 。 


为 什么 引入 Hooks 


React Hooks 用 来 解决 在 项 目 中 长 期 使 用 和 维护 React 过程 中 遇 到 的 一 些 难 以 避免 的 问题 ， 
其 中 一 个 核心 问题 是 如 何 实现 业务 逻辑 代码 分 离 ， 从 而 实现 组 件 内 部 相关 业务 逻辑 的 复 用 。 

- 般 情 况 下 ， 我 们 都 是 通过 组 件 和 自 上 而 下 传递 的 数据 流 将 我 们 页 面 上 的 大 型 UI 拆 分 为 
独立 的 小 型 UI 组 件 ， 实 现 组 件 的 重用 。 但 是 ， 在 实际 的 项 目 中 ， 经 常会 发 现 ， 组 件 的 逻辑 是 
有 状态 的 ,无 法 将 逻辑 提取 到 函数 组 件 中 ， 从 而 导致 复杂 组 件 难以 实现 重用 。 这 类 问题 在 处 理 
动画 和 表单 时 尤为 常见 。 当 我 们 在 组 件 中 连接 外 部 的 数据 源 , 并 希望 在 组 件 中 执行 更 多 其 他 操 
作 时 ， 我 们 就 会 把 组 件 做 得 过 于 复杂 。 类 似 的 问题 有 : 

(1) 难以 跨 组 件 复 用 包含 状态 的 逻辑 。 

难以 重用 和 共享 组 件 中 与 状态 相关 的 逻辑 ， 从 而 产生 很 多 代码 里 较 大 的 组 件 。React 没有 
提供 一 种 将 可 复 用 的 行为 复 用 到 组 件 上 的 方式 (如 redux 的 connect 方法 ) 。render props 和 高 
阶 组 件 的 出 现 就 是 为 了 解决 逻辑 复 用 的 问题 ,但 是 这 些 模式 都 要 求 开 发 人 员 重 新 构造 已 有 的 组 
件 ， 这 种 重 构 可 能 会 非常 麻烦 。 在 很 多 典型 的 React 组 件 中 ， 可 以 在 React DevTool 里 看 到 这 
些 组 件 被 层 层 登 登 的 providers、 consumers、 高 阶 组 件 、render props 和 其 他 抽象 层 包 里 。 因 
此 ，React 需要 一 些 更 好 的 底层 元 素来 复 用 包含 状态 的 组 件 逻 辑 。 


(2) 逻辑 复杂 的 组 件 难 以 开发 与 维护 。 

我 们 在 刚 开始 构建 项 目 中 所 需 的 组 件 时 ， 组 件 初期 往往 相对 简单 。 然 而 随 着 开发 的 进展 ， 
组 件 会 变 得 越 来 越 大 、 逻 辑 越 来 越 多 、 代 码 越 来 越 混乱 ， 各 种 逻辑 在 组 件 中 散落 的 到 处 都 是 。 
当 我 们 的 组 件 需 要 处 理 多 个 互 不 相关 的 local state 时 ， 每 个 生命 周期 钩子 中 都 包含 了 一 堆 互 不 
相关 的 逻辑 。 例 如 常常 会 在 componentDidMount 或 componentDidUpdate 中 拉 取 数据 ， 同 时 
compnentDidMount 方法 可 能 又 包含 一 些 不 相干 的 逻辑 ， 如 设置 事件 监听 ， 之 后 需要 在 
componentWillUnmount 中 清除 。 最 终 的 结果 是 强 相 关 的 代码 被 分 离 ， 反 而 是 不 相关 的 代码 被 
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组 合 在 了 一 起 。 


在 许多 情况 下 , 我 们 也 不 太 可 能 将 这 些 组 件 分 解 成 更 小 的 组 件 ， 因 为 逻辑 到 处 都 是 , 测试 


起 来 也 非常 困难 。 这 也 是 许多 开发 者 喜欢 将 React 与 单独 的 状态 管理 库 结 合 使 用 的 原因 之 
然而 ， 这 通常 会 引入 太 多 的 抽象 ， 需 要 在 不 同 的 文件 之 间 跳 转 ， 并 且 使 得 重用 组 件 更 加 困难 。 


(3) 类 组 件 中 的 this 增加 学 习 成 本 。 
类 组 件 在 基于 现 有 工具 的 优化 上 存在 些许 问题 ，React 中 功能 和 类 组 件 的 区 别 以 及 何 时 使 


每 种 组 件 都 会 导致 有 经 验 的 React 开发 人 员 之 间 的 分 歧 。 开 发 者 必须 了 解 this 如 何在 


JavaScript 中 工作 ， 这 与 它 在 大 多 数 语 言 中 的 工作 方式 非常 不 同 ， 开 发 者 必须 记 住 绑 定 事件 处 
理 程序 。 


(4) 由 于 业务 变动 ， 函 数组 件 不 得 不 改 为 类 组 件 。 
刚 开始 编写 React 代码 时 较为 常用 函数 式 组 件 , 函数 式 组 件 代码 简洁 、 编 写 效率 快 。 然 而 ， 


随 着 业务 的 变化 , 后面 会 发 现 很 多 以 前 写 的 组 件 需要 修改 , 会 发 现 很 多 地 方 都 需要 生命 周期 和 
状态 来 进行 泻 染 优化 ， 需 要 将 大 量 的 函数 式 组 件 修改 为 class 组 件 。 


在 这 种 情况 下 ，Hooks 是 这 些 问 题 的 一 种 解决 方案 。Hooks 允许 我 们 将 组 件 内 部 的 逻辑 组 


织 成 为 一 个 可 复 用 的 隔离 模块 。ReactHooks 需要 实现 清晰 明确 的 数据 流 和 组 成 形式 ， 既 可 以 
复 用 组 件 内 的 逻辑 ， 也 不 会 出 现 HOC 带 来 的 层 层 嵌 套 ， 更 不 会 出 现 Mixin 的 次 端 。 例 如 ， 使 


月 


日 类 组 件 实现 单 击 按钮 次 数 +1 组 件 通常 会 有 如 下 代码 实现 : 


import React from 'react'; 


class Example extends React.Component { 
constructor(props) { 
super (props); 
this.state = {count: 0}; 
// 单 击 事件 声明 
this.clickBtn = this.clickBtn.bind(this); 
} 
// 单 击 事件 
clickBtn = () => { 
this.setState({ 
count: this.state.count + 1; 
和 
} 
// 演 染 
return ( 
<div> 
<p>You clicked {this.state.count} times</p> 
<button onClick={this.clickBtn}> 
Click me 
</button> 
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</div> 
WS 
} 


使 用 React Hooks 之 后 ， 代 码 可 以 修改 为 : 
// 单 击 计数 器 


import { UseState } from 'react'; 


function Example() { 
// 引入 count 和 setcount 
const [count, setCount] = useState (0) 


// 在 useEffect 中 处 理 异 步 事 件 
useEffect(() =({ 
document .title = “You clicked ${count} times 7 
}); 
// 泻 染 
return ( 
<div> 
<p>You clicked {count} times</p> 
<button onClick={() => setCount (count + 1)}> 
Click me 
</button> 
</div> 
) 7 
} 


其 中 Hooks 提供 的 API 可 以 大 幅 减 少 React 函数 组 件 的 代码 量 ， 在 下 一 节 中 详细 介绍 
Hooks 的 使 用 方法 。 


Hooks 的 使 用 方法 


Hooks 让 我 们 的 函数 组 件 拥 有 了 类 似 类 组 件 的 特性 。 


12.2.1 useState 
直接 来 看 一 个 useState 的 例子 。 
【示例 12-1 useState】 


import { useState } from "Teact'7 
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function Example() { 
// 引入 count 和 setCount 
const [count， setCount] = UseState (0) 
// 引入 age 和 setAge 
const [age, setAge] = UseState (42) 7 
// 引入 fruit 和 setFruit 
const [fruit, setFruit] = useState('Mac') 7 
// 引入 todos 和 setTodos 
const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]); 


return ( 
<div> 
<p>You clicked {count} times</p> 
<button onClick={() => setCount (count + 1)}> 
Click me 
</button> 
</div> 
); 
} 


useState 的 参数 就 是 state 的 初始 值 。useState 返回 的 值 中 第 一 个 参数 是 以 前 的 state， 第 二 
个 参数 是 setState。 过 去 只 有 一 个 state， 现 在 可 以 自由 命名 state， 更 加 直观 ， 如 上 代码 示例 中 
的 age 和 setAge、fruit 和 setFruit。useState 方法 可 以 为 我 们 的 函数 组 件 带 来 local state， 它 接 
收 一 个 用 于 初始 state 的 值 ， 返 回 一 对 变量 : 


const [count, setCount] = useState (0) 


// 等 价 于 
Var const = useState(0) [0]; // 该 state 
var setConst = usestate(0) [1]; // 修改 该 state 的 方法 


12.2.2 useEffect 

每 当 React 更 新 之 后 ,就 会 触发 useEffect( 在 第 一 次 render 和 每 次 update 后 触发 ) useEffect 
可 以 利用 我 们 组 件 中 的 local state 进行 一 些 带 有 副作用 的 操作 ， 例 如 : 

useEffect(() = ({ 


document .title = ‘You clicked ${count} times’; 
Bs 


useEffect 中 还 可 以 通过 传 入 第 二 个 参数 来 决定 是 否 执 行 里 面 的 操作 来 避免 一 些 不 必要 的 


性 能 损失 ,只 要 第 三 个 参数 数组 中 的 成 员 值 没有 改变 , 就 会 跳 过 此 次 执行 。 如果 传 入 一 个 空 数 
组 [ ]， 那 么 该 effect 只 会 在 组 件 mount 和 unmount 时 期 执行 ， 上 述 代 码 可 以 修改 为 : 
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vseEffect(() = ({ 

document .title = “You clicked ${count} times 7 
}, [count]); // 如 果 count 没有 改变 ， 就 跳 过 此 次 执行 

useEffect 中 还 可 以 通过 让 函数 返回 一 个 函数 来 进行 一 些 清理 性 的 操作 ， 例 如 取消 订阅 : 
usepffect(()y = (t 

api.subscribe (theId); 

return () = Ot 

api .unsubscribe (theId) //clean up 


} 
1); 


useEffect 会 在 组 件 mount 和 unmount 以 及 每 次 重新 演 染 的 时 候 都 执行 ， 也 就 是 会 在 
componentDidMount、componentDidUpdate、componentWillUnmount 这 三 个 生命 周期 中 执行 。 
清理 函数 会 在 前 一 次 effect 执行 后 、 下 一 次 effect 将 要 执行 前 以 及 Unmount 时 期 执行 。 
12.2.3 useReducer 

利用 React Hooks 可 以 轻松 创建 一 个 Redux 机 制 。 

【示例 12-2 useReducer】 


function Todos() { 


const [todos, dispatch] = useReducer (todosReducer); 
const [add, dispatch] = useReducer (todosReducer); 
A 


function useReducer (reducer, initialstate) { 
const [state, setstate] = useState (initialstate); 
// 触发 
function dispatch (action) { 
const nextState = reducer (state, action); 
setstate (nextstate); 


return [state, dispatch]; 
} 


这 个 自 定义 Hook 的 value 部 分 当 作 redux 的 state，setValue 部 分 当 作 redux 的 dispatch， 
合 起 来 就 是 一 个 redux。 而 react-redux 的 connect 与 Hook 调用 方式 一 样 : 


WE 个 :REEOR 


function useTodos() { 


const [todos, dispatch] = useReducer (todosReducer, []); 
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// 处 理 单 击 事件 
function handleaddClick(text) { 
dispatch({ type: "add"，text }) 7 


return [todos, { handleAddclick }]; 


// 绑 定 Todos 的 UI 
function TodosUI() { 
const [todos, actions] = useTodos(); 
return ( 
<div> 
{todos.map((todo, index) => ( 
<div>{todo.text}</div> 
) ) } 
<button onClick={actions.handleAddclick}>Add Todo</button> 
</div> 
下 
} 


需要 注意 的 是 ，React Hooks 只 提供 状态 处 理 方法 ， 不 会 持久 化 状态 。 除 此 之 外 ， 还 提供 
了 许多 有 用 的 Hooks: 


® useCallback 

useMemo 

UseContext 

UseRef 
uselmperativeMethods 
useMutationEffect 


useLayoutEffect 


12.2.4 ”Hooks 使 用 限制 


我 们 只 能 在 函数 组 件 (functional component) 中 使 用 Hooks， 同 时 也 可 以 在 一 个 组 件 中 使 
用 多 组 Hooks， 例 如 : 


【示例 12-3 ”使 用 多 组 Hooks】 


function FriendstatusWithCounter (props) { 


const [count, setCount] = UseState (0) 
useEffect(() = ({ 
document .title = ‘You clicked ${count} times’; 


[ne 


203 


React.js 实战 


} 


// 定义 isonline 和 setIsonline 
const [isonline, setIsOnline] = useState (null); 
// 在 useEffect 中 处 理 异 步 方 法 
usepffecti(() = ({ 

API .subscribe (props.friend.id); 

Eon 0 = 

API .unsubscribe (props.friend.id); 

1D); 

]) 7 


return isonline 


需要 注意 的 是 ， 只 能 在 顶层 代码 (Top Level) 中 调用 Hooks,， 不 能 在 循环 或 判断 语句 等 里 


面 调用 , 这 是 为 了 让 Hooks 在 每 次 泻 染 的 时 候 都 会 按照 相同 的 顺序 调用 , 因为 useState 需要 依 
赖 参照 第 一 次 泻 染 的 调用 顺序 来 匹配 对 应 的 state， 和 否则 useState 会 无 法 正确 返回 对 应 的 state。 
useState 的 源码 分 析 如 下 : 


let globalHooks; 
function useState (defaultValue) { 


// 试图 从 globalHooks 全 局 变量 中 获取 最 后 一 次 运行 的 状态 , 在 调用 组 件 函 数 之 前 设置 Map 对 象 ， 
// Map 应 该 有 上 次 运行 后 的 数据 ， 否 则 需要 创建 自己 的 数据 hookData 
let hookData = globalHooks.get (usesState); 
if (!hookData) hookData = { calls: 0, store: [] }; 
// hookData.store 是 一 个 数组 ， 用 于 存储 上 次 调用 的 hookData.calls 值 ， 该 值 用 于 跟踪 
// 此 函数 被 我 们 的 组 件 调用 的 程度 
if (hookData.store[hookData.calls] === undefined) 
// 在 第 一 次 调用 时 应 该 返回 defaultvalue; 通过 hookData. store [hookData.calls]， 
// 可 以 获取 调用 的 最 后 一 个 存储 值 ; 如 果 它 不 存在 则 必须 使 用 defaultValue 


hookData.store[hookData.calls] = defaultValue; 
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let value = hookData.store[hookData.calls]; 
let calls = hookData.calls; 
// setValue 回调 用 于 单 击 按钮 时 更 新 我 们 的 数据 值 ， 例 如 当 单 击 一 个 按钮 ， 会 调用 cal1s， 
// 因此 它 知道 setstate 函数 调用 属于 哪个 cal1s。 然 后 使 用 hookData.render 回调 ， 
// 启动 所 有 组 件 的 重新 呈现 
let setValue = function (newValue) { 
hookData.store[calls] = newValue; 
hookData.render (); 
a 
// hookData.calls 计数 器 增加 
hookData.calls += 1; 
// hookData 被 存储 在 globalHooks 变量 中 ， 因 此 组 件 函 数 返回 后 ， 可 通过 render 函数 使 用 
globalHooks.set (useState, hookData); 
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return [value, setValuel]; 
} 


Hooks 实践 


对 React 组 件 来 说 ，Hooks 是 一 个 高 效 的 API 插件 ， 本 节 介 绍 如 何在 React 实践 中 使 用 
Hook 进行 优化 代码 结构 。 


12.3.1 与 状态 有 关 的 逻辑 重用 


首先 ， 对 于 与 状态 有 关 的 逻辑 进行 重用 和 共享 问题 ， 过 去 这 类 问题 的 一 个 解决 方案 是 ， 
Render Props 通过 props 接收 一 个 返回 react element 的 函数 来 动态 决定 自己 要 泻 染 的 结果 : 
<DataProvider render={data = ( 


<hl>Hello {data.target} </hl>; 
Ey 


另外 一 种 解决 方案 是 使 用 HOC 生产 组 件 : 


function generateComponent (WrappedComponent) { 
return class extends React.Component { 
constructor(props) { 
super (props); 


componentDidMount () { 
// 迪 辑 代码 


componentWillUnmount () { 


// 逻辑 代码 


render() { 
return <WrappedComponent {...this.props} />; 


了 
} 
这 两 种 方法 都 会 造成 组 件数 量 增多 , 甚至 是 修改 组 件 树 结构 , 而 且 有 可 能 出 现 组 件 多 层 嵌 
套 的 情况 。 通 过 使 用 Hooks， 可 以 通过 函数 来 封装 与 状态 有 关 的 逻辑 ,将 这 些 逻 辑 从 组 件 中 抽 
取出 来 。 在 这 个 函数 中 我 们 既 可 以 使 用 其 他 的 Hooks， 也 可 以 单独 进行 测试 ， 例 如 : 


import { useState, useEffect } from ‘'react'; 
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function useFriendstatus (friendID) { 


const [isonline, setIsOnline] = useState (null); 


function handleStatusChange (status) { 
setIsOnline(status.isOonline); 
} 
// useEffect 处 理 
usepffect(() =>{ 
ChatAPI .subscribeToFriendstatus (friendID, handlestatusChange); 
return () => { 
ChatAPI .unsubscribeFromFriendstatus (friendID, handlestatusChange); 
] 7 
}); 


return isonline; 
} 


如 上 代码 通过 useEffect 封装 对 count 的 操作 。useCount 其 实 就 是 一 个 函数 ， 我 们 可 以 在 
现 有 的 所 有 其 他 组 件 中 进行 调用 : 


function FriendStatus (props) { 


const isonline = useFriendStatus (props.friend.id); 
if (isOonline === null) { 
return 'Loading...'; 
| 
return isonline ? 'Online' : "Offline'7 


function FriendListItem(props) { 
const isonline = useFriendstatus (props.friend.id); 


return ( 
<1li style={{ color: isOnline ? 'green' : 'black' }}> 
{props.friend.name} 
</1i> 
) 7 
} 


第 12.1 节 中 提 到 ， 组 件 可 能 会 随 着 项 目 和 业务 的 发 展 变 得 越 来 越 复 杂 ， 组 件 中 要 处 理 越 
来 越 多 的 状态 , 那么 在 组 件 的 生命 周期 函数 中 就 会 充斥 着 各 种 互 不 相关 的 逻辑 。 这 里 需要 引入 
官方 比较 复杂 的 例子 ， 先 看 基于 以 前 类 组 件 的 情况 : 


class FriendstatusWithCounter extends React.Component { 


constructor(props) { 
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super (Props) 
this.state = { count: 0，isonline: null }; 


this .handleStatusChange = this.handlestatusChange.bind (this); 


componentDidMount () { 
document .title = ‘You clicked ${this.state.count} times’; 
ChatAPI .subscribeToFriendstatus( 
this.props.friend.id, 
this.handleStatusChange 
Ds 


componentDidUpdate() { 
document .title = ‘You clicked ${this.state.count} times’; 


componentWillUnmount () { 
// 异步 
ChatRPI.unsubscribeFromFriendStatus ( 
this.props.friend.id, 
this.handleStatusChange 
) 7 


handlestatusChange (status) { 
this .setState({ 
isonline: status.isOonline 
1); 
} 
VHS 


通过 使 用 Hook， 上 述 代码 可 以 修改 为 : 


function EriendStatusWithCounter (Props) { 
const [count, setCount] = useState(0); 
useEffect(() = ({ 
document .title = ‘You clicked ${count} times’; 


]}) 7 


const [isonline，setIsOnline] = useState (null); 


useEffect(() = ({ 
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ChatAPI .subscribeToFriendstatus (props.friend.id, handlestatusChange); 
return () = {({ 
ChatAPI .unsubscribeFromFriendstatus (props.friend.id, 
handlestatusChange); 
ys 
1); 


function handleStatusChange (status) { 
setIsOnline (status.isonline); 


pe 


通过 Hook 修改 后 的 代码 ， 状 态 和 相关 的 处 理 逻 辑 都 可 以 按照 功能 进行 划分 ,不必 在 各 个 
生命 周期 中 进行 管理 ， 大 大 降低 了 开发 和 维护 的 难度 。 


12.3.2 DOM 操作 副作用 的 修改 


在 页 面 中 总 有 一 些 看 上 去 和 组 件 关系 不 大 的 副作用 需要 处 理 , 例如 修改 页 面 标题 、 监 听 页 
面 大 小 变化 《组 件 销毁 记得 取消 监听 ) 、 断 网 时 提示 组 件 嵌 套 〉。 例 如 ， 修 改 页 面 title， 
在 组 件 里 调用 useDocumentTitle 函数 即 可 设置 页 面 标题 , 且 切 换 页 面 时 , 页 面 标题 重 置 为 默认 
标题 “我 的 信息 ”: 


useDocumentTitle ("个 人 中 心 "); 


直接 用 document.title 赋值 ， 在 销毁 时 再 次 给 一 个 默认 标题 即 可 ， 这 个 简单 的 函数 可 以 抽 
象 在 项 目 工具 函数 里 ， 供 其 他 页 面 组 件 调用 : 


function useDocumentTitle (title) { 

useEffect( 

ee 

document .title = title; 

return () => (document.title = "我 的 信息 ") ; 
]} 

[title] 
2 
} 


监听 页 面 大 小 变化 、 网 络 是 否 断 开 ， 在 组 件 调用 useWindowSize 时 ， 可 以 获取 页 面 宽 高 ， 
并 且 在 浏览 器 缩放 时 自动 触发 组 件 更 新 : 


const windowSize = useWindowSize(); 
return <div> 页 面 宽 度 : {windowSize.innerWidth}</div>; 


通过 window.innerHeight 等 API 直接 获取 页 面 宽 高 ,此 时 可 以 用 window.addEventListener(resize) 
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监听 页 面 大 小 变化 ， 此 时 调用 setValue 将 会 触发 调用 自身 的 UI 组 件 rerender， 最 后 注意 在 销 


销 监听 : 


毁 时 removeEventListener 将 


function getSize() { 
return { 
innerHeight: window.innerHeight， 
innerWidth: window.innerWidth, 
outerHeight: window.outerHeight, 
outerWidth: window.outerWidth 
x 


function useWindowSize() { 
let [windowSize, setWindowSize] = useState (getSize()); 


function handleResize() { 
setWindowSize (getSize()); 
} 
// 在 这 里 处 理 异步 
useEffect(() => { 
window.addEventListener ("resize", handleResize); 
return (=> 
window.removeEventListener ("resize", handleResize); 
] 7 
}, [1); 


return windowSize; 


12.3.3” Hooks 互相 引用 
React Hooks 可 以 引用 其 他 Hooks， 例 如 : 


【示例 12-4 Hooks 引用 其 他 Hooks】 
import { useSstate, useEffect } from "react"; 
// 底层 Hooks， 返 回 布尔 值 


function useFriendstatusBoolean (friendID) { 


const [isonline，setIsOnline] = useState (null); 


function handleStatusChange (status) { 


setIsOnline (status.isonline) 7 
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useEffect(() => { 


ChatAPI .subscribeToFriendstatus (friendID, handlestatusChange); 


return () => { 


ChatAPI .unsubscribeFromFriendstatus (friendID, handlestatusChange); 


] 
]}) 7 


return isonline; 


// 上 层 Hooks， 根 据 在 线 状态 返回 字符 串 
function useFriendstatusstring (props) { 
const isonline = UseFriendStatusBoolean (Props.friend.id) 


if (isonline === null) { 
return "Loading..."; 
} 
return isonline ? "Online" : "offline"; 


// 使 用 了 底层 Hooks 的 UI 
function FriendListItem(props) { 
const isonline = useFriendstatusBoolean (Props.friend.id) 
return ( 
<1i style={{ color: isonline ? "green" : "black" }}>{props 
) 7 


// 使 用 了 上 层 Hooks 的 UI 

function FriendListstatus (props) { 
const statu = useFriendstatusstring (props.friend.id); 
return <li>{statu}</1i>; 

} 


7 


n 


.friend.name}</1i> 


在 这 个 示例 代码 中 ， 有 两 个 Hooks: useFriendStatusBoolean 与 useFriendStatusString。 
useFriendStatusString 是 利用 useFriendStatusBoolean 生成 的 新 Hook， 这 两 个 Hook 可 以 给 不 同 


的 UI (FriendListItem、FriendListStatus) 使 用 ， 因 为 两 个 Hooks 数据 是 


其 动 的 ， 所 以 两 个 UI 


的 状态 也 是 联动 的 。 实 现 有 状态 的 组 件 没 有 泻 染 ， 有 泻 染 的 组 件 没 有 状态 : 
useFriendStatusBoolean 与 useFriendStatusString 是 有 状态 的 组 件 ( 使 用 useState) , 没有 泻 染 ( 返 


El 


回 非 UI 的 值 ) ， 这 样 就 可 以 作为 Custom Hooks 被 任何 UI 组 件 调 上 


; FriendListItem 与 


FriendListStatus 是 有 演 染 的 组 件 (返回 了 JSX) ， 没 有 状态 (没有 使 用 useState) ， 这 就 是 一 


个 纯 函数 全 组件。 
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12.3.4 ”处 理 动画 


使 用 React Hooks 处 理 动画 ， 可 以 获取 一 些 具有 弹性 变化 的 值 ， 将 这 些 值 赋 给 进度 条 之 类 
的 组 件 ， 这 样 其 进度 变化 就 符合 某 种 动画 曲线 。 例 如 ， 在 某 个 时 间 段 内 获取 0~1 之 间 的 值 ， 
可 以 通过 useRaf(b 获 取 t 毫秒 内 不 断 刷 新 的 0~1 之 间 的 数字 ， 期 间 组 件 会 不 断 刷新 ， 但 刷新 频 
率 由 requestAnimationFrame 控制 ， 不 会 造成 UI 卡 顿 。 

【示例 12-5 ”使 用 Hooks 处 理 动画 】 


import React, { 


usestate, 

useEffect, 

useLayoutEffect, 

useCallback, 

useRef 
} from "react"™; 
import { useRaf } from "react-use"; 
import ReactDOM from "react-dom"; 


function App() { 
const value = useRaf (5000); 


return <div>{value}</div>; 


const rootElement = document .getElementById ("root"); 
ReactDOM.render (<App />, rootElement); 


还 有 一 类 是 异步 请 求 。 通 过 useAsync 将 一 个 Promise 拆 解 为 loading、error、result 三 个 对 


const { loading, error, result } = useAsync (fetchUser, [id]); 


在 Promise 的 初期 设置 loading， 结 束 后 设置 result， 如 果 出 错 则 设置 error: 


export function useAsync(asyncFunction) { 
const asyncstate = useAsyncstate (options); 


usepffect(() => 
const promise = asyncFunction(); 
asyncstate.setLoading (); 
promise.then( 
result => asyncstate.setResult (result);, 
error => asyncstate.setError (error); 
); 
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}, params); 


参考 react-async-hook 完整 的 实现 : 


import { useEffect, useRef, useState } from "react"; 


const InitialAsyncstate = { 
loading: true, 
result: undefined, 
error: undefined, 

}; 


const defaultSetLoading = (asyncstate) => InitialAsyncstate; 
const defaultSetResult = (result, asyncstate) => ({ 
loading: false, 
result: result, 
error: undefined, 
1); 
// 默认 异常 设置 
const defaultSetError = (error, asyncstate) => ({ 
loading: false, 
result: undefined, 
error: error, 


]) 7 


// 默认 选项 

const Defaultoptions = { 
setLoading: defaultSsetLoading, 
setResult: defaultSetResult,， 
setError: defaultSetError， 

] 7 

// 标准 选项 

const normalizeoptions = options => ({ 
.. .DefaultOoptions, 
.. .options, 

1); 


// 异步 设置 状态 

const useAsyncstate = options => { 
const [value, setValue] = useState (InitialAsyncstate); 
Feturn { 


value, 
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setLoading: () => setValue (options.setLoading (value)), 
setResult: result => setValue (options .setResult (result, value)), 


setError: error => setValue (options.setError (error, value)), 


const useIsMounted = () => { 
const ref = useRef (false); 
useEffect(() => { 
ref-current = true, 
return () => ref.current = false; 
LP 
return () => ref.current; 
}; 


const useCurrentPromise = () => { 
const ref = useRef (null); 
return { 
set: (promise => ref.current = promise), 
is: (promise => ref.current === promise), 


export const useAsync = (asyncFunction, params = [], options) => { 


options = normalizeOptions (options); 

const AsyncState = UseAsyncState (options); 
const isMounted = useIsMounted(); 

const CurrentPromise = useCurrentPromise(); 


// 仅 处 理 promise 的 result 和 error 状态 
// 如 果 是 最 后 一 个 操作 ， 并 且 comp 仍然 挂 载 


Hooks 


const shouldHandlePromise = p => isMounted() && CurrentPromise.is(p); 


Const executeAsyncOoperation = () => { 
const promise = asyncFunction (params); 
CurrentPromise.set (promise); 
RARAsyncState.setLoading() 7 
promise.then( 


result => { 
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例如 ， 获 取 用 户 信息 redux 的 实现 : 


通过 Hooks 封装 的 useAsync 则 可 以 改 成 : 


第 12 章 Hooks 


fetch(‘xxx*) -then (result => { 
TF (resalt status == 200) 
throw new Error("bad status = " + result.status); 
1 
return result.json(); 
]) 7 
// 封装 
function useFetchUser (id) { 
const asyncFetchUser = useAsync (fetchUser, id); 
return asyncUser; 
} 


function App() { 
const { isLoading, error, data } = useFetchUser(); 
} 


12.3.5 ”模拟 生命 周期 
通过 useMount 拿 到 mount 周期 才 执 行 的 回调 函数 实现 componentDidMount: 


UseMount (() => { 
// 类 似 于 componentDidMount 
By 


通过 useUnmount 拿 到 unmount 周期 才 执 行 的 回调 函数 实现 componentWillUnmount: 
useUnmount (() => { 


// 类 似 于 componentWwillUnmount 
1); 


通过 useUpdate 拿 到 didUpdate 周期 才 执 行 的 回调 函数 componentDidUpdate: 
useUpdate(() => { 


// 类 似 于 componentDidUpdate 
1); 


componentDidUpdate 除了 第 一 次 初始 化 之 外 ， 等 价 于 useMount 的 逻辑 每 次 执行 。 因 此 采 
mouting flag (判断 初始 状态 )+ 不 加 限制 参数 确保 每 次 rerender 都 会 执行 即 可 : 


const mounting = useRef (true); 
Waepffect lt) => 
if (mounting.current) { 
mounting.current = false; 
} else { 
fn(); 
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]) 7 


12.4 


Hooks 小 结 


本 章 介绍 了 Hooks 如 何 解决 使 用 React 开发 和 维护 项 目 过 程 中 长 期 存在 的 问题 。Hooks 还 


处 于 早期 阶段 ， 但 
Ieact-16.7.0-alpha.0 


是 给 我 们 复 用 组 件 的 逻辑 提供 了 一 种 很 好 的 解决 问题 思路 ， 可 以 在 
pb 体 验 。 把 React Hooks 当 作 更 便捷 的 renderProps 来 使 用 ， 虽 然 写法 看 上 


去 是 内 部 维护 了 一 个 状态 ,但 其 实 等 价 于 注入 、Connect、.HOC 或 者 renderProps, 使 用 renderProps 


的 门槛 会 大 大 降低 ， 


我 们 可 以 抽象 大 量 Custom Hooks， 而 不 会 增加 代码 的 垦 套 层级 。 


React 官方 的 目标 是 尽 可 能 快 地 让 Hooks 覆盖 所 有 的 类 组 件 的 诉求 ,但 是 现在 Hooks 还 处 
于 一 个 非常 早 的 阶段 ， 相 关 的 调试 工具 、 第 三 方 库 等 都 还 没有 做 好 对 Hooks 的 支持 ， 而 且 目 
前 也 没有 可 以 取代 类 组 件 中 getSnapshotBeforeUpdate 和 componentDidCatch 的 方案 , 不 过 相信 
后 续 很 快 会 在 Hooks 中 添加 这 些 特性 。 总 的 来 说 ， 鼓 励 使 用 Hooks， 对 于 已 存在 的 类 组 件 ， 不 
必 再 大 规模 地 去 重 写 。 至 于 Hooks 是 否 可 以 代替 render-props 和 higher-ordercomponents， 官 方 
提议 在 大 多 数 案例 下 代替 。 官 方 表 示 ，Hooks 及 Hooks 的 生态 会 继续 完善 。 
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React 实 战 ; React+ 
webpack+ES6 实 现 简 易 笔 记 本 


本 章 我 们 将 使 用 在 前 几 章 所 阐述 的 相关 知识 ， 使 用 React 实现 简易 的 笔记 本 ,包括 环境 配 
置 、 前 台 界 面 和 后 台 应 用 ， 构 建 单 页 面 应 用 。 


配置 环境 


13.1.1 前 台 准 备 
本 章 我 们 将 从 零 开 始 构 建 实现 一 个 笔记 本 应 用 。 首先 从 创建 数据 库 开 始 , 然后 创建 后 台 服 
务 ， 最 后 实现 前 台 用 户 可 操作 的 界面 。 
首先 创建 文件 夹 ， 用 于 同时 存放 前 台 应 用 和 后 台 应 用 : 
mkdir notebook app && cd notebook app 
然后 我 们 从 前 台 应 用 开始 着 手 。 本 例 使 用 create-react-app 创建 前 台 项 目 ， 使 用 
create-react-app 提供 的 初始 的 webpack 和 Babel 配置 。 若 尚未 安装 create-react-app， 则 使 用 如 
下 命令 全 局 安装 : 
npm i -9g create-react-app 
create-react-app 安装 完成 之 后 ， 使 用 如 下 命令 创建 react 项 目 : 
create-react-app client && cd client 
项 目 中 需要 使 用 ajax 来 发 送 get 或 post 请 求 ， 使 用 如 下 命令 安装 axios: 
npm i -S axios 
安装 完成 之 后 ， 编 辑 App.js 文件 ， 泻 染 笔 记 本 提示 信息 ， 当 后 台 应 用 创建 完成 之 后 我 们 
再 继续 完善 前 台 界 面 : 


// client/src/App.js 


import React, { Component } from "react"; 
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class App extends Component { 
render() { 
return <div> 欢 迎 来 到 笔记 本 应 用 ! :-)</div>; 
} 


export default App; 


使 用 如 下 命令 行 启动 程序 : 


npm start 


在 浏览 器 中 打开 http://localhost:3000/ ， 可 以 看 到 如 图 13-1 简单 的 界面 , 说 明 前 台 应 月 


动 成 功 。 


CGC © localhost:3000 
| 欢迎 来 到 笔记 本 应 用 !:-) 


图 13-1 前 台 界 面 启动 成 功 


13.1.2 ”服务 端 准 备 


回 到 笔记 本 应 用 的 根 目 录 ， 即 13.1.1 节 中 创建 的 notebook_app 目录 下 ， 创 建 后 台 应 上 
件 夹 ， 并 初始 化 package.json: 


mkdir backend && cd backend 
npm init 


创建 后 台 应 用 的 主 程序 文件 serverjs ， 并 输入 如 下 代码 : 


// 引入 mongoose 

const mongoose = require ("mongoose"); 

// 引入 express 

const express = require ("express"); 

// 引入 body-parser 

const bodyParser = require ("body-parser") 7 
const logger = require ("morgan") 7 


const Data = require("./data"); 


const API PORT = 3001; 
// express 实例 
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const app = express () 


// 路 由 


const router = express-Router () > 


// 定义 MongoDB 数据 库 
const dbRoute = " mongodb://test:test1234eds37468 .mlab .com: 
37468/notebook app"; 


// 连接 数据 库 
mongoose.connect ( 

dbRoute, 

{ useNewUrlParser: true } 
) 7 


let db = mongoose.connection; 
X 


db .once ("open"， () => console.log("connected to the database")); 


// 检测 数据 库 连 接 是 否 成 功 

db.on ("error"，console.error.bind (console，"MongoDB connection error:")); 
// 转换 为 可 读 的 json 格式 

app.use (bodyParser.urlencoded({ extended: false })); 

app.use (bodyParser.json()); 

// 开启 日 志 

app.use (logger ("dev")); 


// 获取 数据 的 方法 
// 用 于 获取 数据 库 中 所 有 可 用 数据 
router.get ("/getData", (req, res) => { 
Data.find((err, data) => { 
if (err) return res.json({ success: false, error: err }); 
return res.json({ success: true, data: data }); 


// 数据 更 新 方法 
// 用 于 对 数据 库 中 已 有 数据 进行 更 新 
router.post ("/updateData"， (req, res) => { 
const { id, update } = req.body; 
Data.findoneAndUpdate (id, update, err => { 
if (err) return res.json({ success: false, error: err }); 
return res.json({ success: true }); 
1); 
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// 删除 数据 方法 
// 用 于 删除 数据 库 中 己 有 数据 
router.delete("/deleteData", (req, res) => { 
const { id } = req.body; 
Data.findoneAndDelete(id, err => { 
if (err) return res.send(err); 
return res.json({ success: true }); 
全 
1); 


// 添加 数据 方法 

// 用 于 在 数据 库 中 增加 数据 

Fouter .post ("/pPutData"， (req, res) => { 
let data = new Data() 7 


const { id, message } = req.body; 


if ((!id && id !== 0) || !message) { 
return res.json({ 
success: false, 
error: "INVALID INPUTS" 
1); 
} 
data.message = message; 
data.id = id; 
data.save (err => { 
if (err) return res.json({ success: false, error: err }); 
return res.json({ success: true }); 
Fn 
E77 


// 对 http 请 求 增加 /api 路 由 

app.use("/api", router); 

// 开启 端口 

app.1listen (API PORT, () => console.1og(`LISTENING ON PORT ${API PORT} )); 

这 是 后 台 基 础 代码 ,为 便于 理解 ,代码 中 的 注释 解释 了 如 何 链接 数据 库 、 读 取 数 据 库 内 容 
等 。 关 于 创建 数据 库 的 部 分 将 在 下 一 小 节 中 介绍 。 


13.1.3 ”创建 数据 库 
我 们 使 用 Mlab 提供 的 免费 MongoDB 服务 。 首 先 在 浏览 器 中 打开 https://mlab.com/ 注册 


+t 


220 


第 13 章 ” React 实战 React+twebpack+ES6 实现 简易 笔记 本 


账号 ，Mlab 提供 了 500MB 免费 数据 服务 。 注 册 账 号 并 登录 ， 单 击 新 建 按钮 (Create new) ， 
如 图 13-2 所 示 。 


MongoDB Deployments 


图 13-2 ”创建 数据 库 


然后 选择 amazon web services， 如 图 13-3 所 示 。 


Microsoft Azure 


DEDICATED 


图 13-3 选择 云 服 务 提供 商 
任意 选择 一 个 AWS 区 域 ， 单 击 继续 (CONTINUE) 按钮 ， 如 图 13-4 所 示 。 


图 13-4 选择 AWS 


221 


React.js 实战 


输入 数据 库 名 称 ， 单 击 继续 (CONTINUE) 按钮 ， 如 图 13-5 所 示 。 


CONTINUE 


图 13-5 ”填写 数据 库 名 称 


提交 之 后 ， 回 到 Mlab 主页 ， 复 制 database 信息 用 于 链接 数据 库 。 单 击 Users 标签 ， 创 建 
用 户 (Add database user) ， 如 图 13-6 所 示 。 


lect 


Database Users Add database user 


图 13-6 创建 用 户 
回 到 后 台 程 序 中 ， 创 建 datajs 文件 ， 输 入 如 下 代码 : 


// /backend/data.js 
const mongoose = require ("mongoose"); 
const Schema = mongoose.schema; 


// 注意 这 是 我 们 的 数据 结构 
const DataSchema = new Schema ( 


{ 
id: Number, 
message: String 


]} v 
{ timestamps: true } 


i 


// 返 回 Schema， 便 于 通过 Node .js 使 用 


module.exports = mongoose.model ("Data", Dataschema); 


222 


第 13 章 ”React 实战 : React+twebpack+ES6 实现 简易 笔记 本 


安装 相关 的 依赖 : 


npm i -Ss mongoose express body-parser morgan 


启动 应 用 : 


node server.js 


在 控制 台 可 以 看 到 程序 已 启动 ， 如 图 13-7 所 示 。 
cd backend 


node server.]sS 
LISTENING ON PORT 3001 


connected to the database 


图 13-7 启动 后 台 程 序 


13.1.4 连接 数据 库 
回 到 前 台 应 用 中 ， 修 改 Appjs 文件 如 下 : 


// /client/App.js 
// 引入 react 
import React, { Component } from "react"; 
// 引入 axios 用 于 发 送 异 步 请 求 获取 数据 
import axios from "axios"; 
// 引入 antd 中 相关 的 组 件 
import { 
Button, 
Input, 
List, 
Avatar, 
Card, 


WErom antd> 


// 引入 样式 文件 


import './App.css'; 


class App extends Component { 
// 初始 化 state 
State = { 
datas [ls 
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message: null, 

intervalIsSet: false, 

idToDelete: null, 

idToUpdate: null, 

objectToUpdate: null 
] 7 


// 首先 从 数据 库 中 获取 已 有 数据 
// 然后 添加 轮 询 机 制 ， 用 于 检测 数据 库 的 数据 ， 当 数据 发 生 更 新 时 ， 重 新 泻 染 UI 
componentDidMount () { 
this .getDataFromDb (); 
if (!this.state.intervalIsSet) { 
let interval = setInterval (this.getDataFromDb, 1000); 
this.setstate({ intervalIsSet: interval }); 


// 在 componentWillUnmount 时 销毁 定时 器 
// 需要 及 时 销毁 不 需要 使 用 的 进程 
componentWillUnmount () { 
if (this.state.intervalIsSet) { 
clearInterval (this .state.intervalIsSet) ; 
this.setState({ intervalIsSet: null }); 


// 在 前 台 使 用 ID 作为 数据 的 key 来 辨识 所 需 更 新 或 删除 的 数据 
// 在 后 台 使 用 ID 作为 MongoDB 中 的 数据 实例 的 修改 依据 
// getDataFromDb 函数 用 于 从 数据 库 中 获取 数据 
getDataFromDb = () => { 
fetch("/api/getData") 
.then (data => data.json()) 
.then(res => this.setstate({ data: res.data })); 
] 7 


// putDataToDB 函数 用 于 调用 后 台 API 接口 向 数据 库 新 增 数据 
putDataToDB = message => { 
let currentIds = this.state.data.map(data => data.id); 
let idToBeAdded = 0; 
while (currentIds .includes (idToBeAdded)) { 
++idToBeAdded; 


第 13 章 ” React 实战 : React+twebpack+ES6 实现 简易 笔记 本 


axios.post ("/api/putData", { 
id: idToBeAdded, 
message: message 
Ds; 
js 


// deleteFromDB 函数 用 于 调研 后 台 API 删除 数据 库 中 己 经 存在 的 数据 
deleteFromDB = idTodelete => { 
let objIdToDelete = null; 
this.state.data.forEach(dat => { 
if (dat.id == idTodelete) { 
objIdToDelete = dat. id; 
. 
KE 


axios.delete("/api/deleteData", { 
data: { 
id: objIdToDelete 


1); 


// updateDB 函数 用 于 调用 后 台 API 更 新 数据 库 中 已 经 存在 的 数据 
updateDB = (idToUpdate, updateToApply) => { 
let objIdToUpdate = null; 
this.state.data.forEach(dat => { 
if (dat.id == idToUpdate) { 
objIdToUpdate = dat. id” 
} 
1); 


axios.post ("/api/updateData", { 
id: objIdToUpdate, 
update: { message: updateToApply } 
]) 
he 


// 泻 染 DI 的 核心 方法 
// 该 泻 染 函数 泻 染 的 内 容 与 前 台 界 面 展示 一 臻 
render() { 

const { data = [] } = this.state; 
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console.log('"'data', data) 
return ( 
<div style={{ width: 990, margin: 20 }}> 
<List 
itemLayout="horizontal™ 
datasource={data} 
renderItem={item => ( 
<List.Item> 
<List.Item.Meta 
avatar={<Avatar src="https://gw.alicdn.com/tfs/ 
TB1Hup .wa6qKlRjSZFmXXX0PFXa-1024-1024.jpg" />} 
title={<span>{ ` 创 建 时 间 : ${item.createdAt}`}</span>} 
description={`${item.id}: ${item.message}.} 
/> 
</List.Item> 
)} 
/> 
<Card 
title=" 新 增 笔记 " 
style={{ padding: 10, margin: 10 }}> 
<Input 
onChange={e => this.setState({ message: e.target.value })} 
placeholder=" 请 输入 笔记 内 容 " 
style={{ width: 200 }} /> 
<Button 
type="primary" 
style={{ margin: 20 }} 
onClick={ () => this.putDataToDB (this.state.message)} 
> 添加 </Button> 
</Card> 
<Card 
tit1le=" 删 除 笔记 " 
style={{ padding: 10, margin: 10 }}> 
<Input 
style={{ width: "200px" }} 
onChange={e => this.setstate({ idToDelete: e.target.value })} 
placeholder=" 填 写 所 需 删除 的 ID" 
> 
<Button 
type="primary" 
style={{ margin: 20 }} 
onClick={() => this.deleteFromDB (this.state.idToDelete)} 
> 删除 </Button> 
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</Card> 
<Card 
title=" 更 新 笔记 " 
style={{ padding: 10, margin: 10 }}> 
<Input 
style={{ width: 200, marginRight: 10 }} 
placeholder=" 所 需 更 新 的 ID" 
onChange={e => this.setState({ idToUpdate: e.target .value })} 
位 
<Input 
style={{ width: 200 }} 
onChange={e => this.setState({ updateToApply: e.target.value })} 
placeholder=" 请 输入 所 需 更 新 的 内 容 " 
/> 
<Button 
type="primary" 
style={{ margin: 20 }} 
onClick={ () => 
this.updateDB (this.state.idToUpdate, this.state.updateToApply) 
} 
> 更 新 </Button> 
</Card> 
</div> 


export default App; 


最 后 ， 在 前 台 应 用 client 中 的 package.json 文件 中 添加 代理 指向 后 台 程 序 运 行 的 端口 ， 实 
现 了 自动 将 "http://localhost:3000" 请 求 转发 到 "http://localhost:3001” 的 服务 器 : 


"name": "client", 
nraionYs WOO 
"private": true, 
"dependencies": { 
Axioaw WOLDa0n 
eset 
ureact=0om > PALG=Se0 
"react= Serleots.s rE 
}, 
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"scripts"s 

"start": "react-scripts start"™, 

"build": "react-scripts build", 

"test": "react-scripts test --env=jsdom"， 
"eject": "react-scripts eject" 

到 


"proxy": "http://localhost:3001" 
} 


回 到 notebook_app 目录 ， 执 行 如 下 命令 : 


npm init -y 
npm i -S concurrently 


修改 package.json 文件 如 下 : 
{ 


"name": "notebook app", 
marsion™s m0 0 
ndescriptlionne mn 
"main": "index.js", 
mscripEs: 
"start": "concurrently \"cd backend && node server.js\" \"cd client && npm 
start\™” 
}, 
"keywords": [], 
Sathor "RE 
"license": "ISC", 
"dependencies": { 
eonNnCorrontly: mA O05E. 


} 
在 notebook_app 目录 下 运行 : 


npm start 


至 此 , 我 们 完成 了 笔记 本 应 用 程序 的 环境 创建 过 程 ， 可 以 直接 运行 前 台 和 后 台 的 程序 。 完 
成 的 应 用 程序 效果 图 如 图 13-8 和 图 13-9 所 示 。 我 们 可 以 在 前 台 查 看 数据 库 中 存储 的 内 容 、 添 
加 数据 、 删 除 已 有 的 数据 。 
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€ CGC © localhost:3000 
无 数据 
Er | 翻 
填写 所 需 删 除 的 ID 删除 
所 需 更 新 的 ID [请 输入 所 需 更 新 的 内 容 更 新 


图 13-8 无 数据 示例 状态 


ee C © localhost:3000 
。 id:0 
data: test 
请 输入 内 容 添加 
填写 所 需 删除 的 ID 删除 
所 需 更 新 的 ID 请 输入 所 需 更 新 的 内 容 更 新 


图 13-9 ”添加 数据 后 的 示例 效果 


3.2 引入 antd 


在 第 13.1 节 中 ， 我 们 完成 了 粗略 的 笔记 本 应 用 环境 搭建 ， 所 运行 的 效果 不 涉及 任何 样式 。 
本 节 我 们 将 使 用 antd 对 前 台 界 面 进行 优化 。 
首先 ， 安 装 antd 依赖 : 


yarn add antd 


修改 src/App.js， 引 入 antd 的 按钮 组 件 : 


import React, { Component } from "react'7 
// 引入 antd 按钮 组 件 

import Button from 'antd/lib/button'; 
import './App.css'; 


class APP extends Component { 


render() { 


return ( 
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<div className="App"> 
<Button type="primary">Button</Button> 
</div> 
Ne 
} 
} 


export default App; 


修改 src/App.css， 在 文件 顶部 引入 antd/dist/antd.css: 


Qimport '~antd/dist/antd.css'; 


:App { 
text-align: center; 


} 


重新 运行 程序 就 能 看 到 页 面 上 已 经 有 了 antd 的 蓝 色 按 钮 组 件 ( 见 图 13-10) ， 接 下 来 就 可 


以 继续 选用 其 他 组 件 开 发 应 用 了 。 


€ C © localhost:3000 


antd 按钮 示例 


图 13-10 ”antd 按钮 示例 


我 们 现在 已 经 引入 antd 组 件 并 且 成 功 运 行 起 来 了 ， 但 是 在 实际 开发 过 程 中 还 有 很 多 问 
题 ， 上 述 示例 代码 实际 上 加 载 了 全 部 的 antd 组 件 的 样式 ， 加 载 了 非常 多 不 必要 引入 的 内 容 ， 


控制 台 有 警告 提示 ， 如 图 13-11 所 示 。 


A rYou are using a whole package of antd, please use https://www.npmis.com/package/babel-plugin-import 
to reduce app bundle size. 


图 13-11 antd 按 直 加 载 警告 
因此 ,我 们 需要 对 create-react-app 的 默认 配置 进行 自 定义 ,这 里 我 们 使 用 


进行 自 定义 配置 。 引 入 react-app-rewired: 


yarn add react-app-rewired 


修改 package.json 中 的 启动 配置 : 
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/* package.json */ 


mscripts.: Tt 
"start": "react-app-rewired start", 


"build": "react-app-rewired build", 


"test": "react-app-rewired test" 


于 修改 默认 配置 。 


在 项 目 根 目录 (client 目录 ) 中 创建 一 个 config-overridesjs 文件 ， 


function override (config, env) { 


module.exports 
// webpack 配置 
return config; 
] 7 
使 用 babel-plugin-import (babel-plugin-import 是 一 个 用 于 按 需 加 载 组 件 代 码 和 样式 的 
Babel 插件 ) 。 现 在 我 们 尝试 安装 babel-plugin-import: 


$ yarn add babel-plugin-import 


修改 config-overrides.js 文件 : 


const { injectBabelPlugin } require('react-app-rewired'); 


function override (config, env) { 


module.exports 
config = injectBabelPlugin( 


['import', { libraryName: 'antd', libraryDirectory: 'es', style: "css' }], 
config, 


); 
return config; 


}; 


然后 删除 src/App.css 中 全 量 添加 的 @import '~antd/dist/antd.css'; 样式 代码 ， 修 改 为 如 下 
格式 的 引入 模块 方式 : 


/SFCVADP 5 


import React, { Component } from "Feact'7 


import { Button } from "antd'7 


import './App.css'; 
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Class App extends Component { 
render() { 
return ( 
<div className="App"> 
<Button type="primary">Button</Button> 


</div> 
Yi 


export default App; 


最 后 重启 npm start 访问 页 面 ，antd 组 件 的 js 和 css 代码 都 会 按 需 加 载 ， 在 控制 台 上 也 不 
会 看 到 警告 信息 。 

使 用 antd 可 以 自 定 义 主题 ， 需 要 用 到 less 变量 覆盖 功能 。 我 们 可 以 引入 react-app-rewire 
的 less 插件 react-app-rewire-less 来 帮助 加 载 less 样式 : 


yarn add react-app-rewire-less 


修改 config-overrides.js 文件 : 


const { injectBabelPlugin } = require('react-app-rewired'); 


const rewireLess = require('react-app-rewire-less'); 


module .exports = function override (config, env) { 
config = injectBabelPlugin( 
['import', { libraryName: 'antd', libraryDirectory: 'es', style: true }], 
// change importing css to less 
config, 
); 
config = rewireLess.withLoaderOoptions ({ 
modifyVars: { "@primary-color": "#1DAS7A" }, 
javascriptEnabled: true, 
}) (config, env); 
return config; 
1 


这 里 使 用 less-loader 的 modifyVars 来 进行 主题 配置 。 修 改 后 重启 yam start， 如 果 看 到 一 
个 绿色 的 按钮 ， 就 说 明 配 置 成 功 了 ， 如 图 13-12 所 示 。 
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< C © localhost:3000 


antd 自 定义 样式 


图 13-12 antd 自 定义 样式 


改写 笔记 本 样式 


根据 第 13.2 节 中 的 示例 ， 可 以 对 现 有 笔记 本 的 样式 做 调整 ， 使 之 符合 大 众 审美 标准 。 修 
改 后 的 示例 代码 如 下 : 


// /client/App.js 


import React, { Component } from "react"; 
// 异步 请 求 方法 
import axios from "axios"; 
// 引入 antd 相关 组 件 
import { 
Button, 
Input, 
List, 
Avatar, 
Card, 
from "antd"s 
import './App.css'; 


class App extends Component { 
// 初始 化 state 
state = { 
data: [], 
GD 
message: null, 
intervalIsSet: false, 
idToDelete: null, 
idToUpdate: null, 
objectToUpdate: null 
}; 


// 首先 从 数据 库 中 获取 已 有 数据 
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// 然后 添加 轮 询 机 制 ， 用 于 检测 数据 库 的 数据 ， 当 数据 发 生 更 新 时 ， 重 新 泻 染 UI 
componentDidMount () { 
this .getDataFromDb () 7 
if (!this.state.intervalIsSet) { 
let interval = setInterval (this.getDataFromDb, 1000); 
this.setState({ intervalIsSet: interval }); 


// 在 componentWillUnmount 时 销毁 定时 器 
// 需要 及 时 销毁 不 需要 使 用 的 进程 
componentWillUnmount () { 
if (this.state.intervalIsSet) { 
ClearInterval (this .state.intervalIsSet) 7 
this.setstate({ intervalIsSet: null }); 


// 在 前 台 使 用 ID 作为 数据 的 key 来 辨识 所 需 更 新 或 删除 的 数据 
// 在 后 台 使 用 ID 作为 MongoDB 中 的 数据 实例 的 修改 依据 
// getDataFromDb 函数 用 于 从 数据 库 中 获取 数据 
getDataFromDb = () => { 
fetch("/api/getData") 
.then (data => data.json()) 
.then(res => this.setState({ data: res.data })); 
bn 


// putDataToDB 函数 用 于 调用 后 台 API 接口 向 数据 库 新 增 数据 
putDataToDB = message => { 
let currentIds = this.state.data.map (data => data.iqd); 
let idToBeAdded = 0; 
while (currentIds .includes (idToBeAdded)) { 
++idToBeAdded; 


axios.post ("/api/putData", { 
id: idToBeAdded, 
message: message 
Es 
yn 


// deleteFromDB 函数 用 于 调用 后 台 API 删除 数据 库 中 已 经 存在 的 数据 
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deleteFromDB = idTodelete => { 
let objIdToDelete = null; 
this state data forEach(dat => 
if (dat.id == idTodelete) { 
objIdToDelete = dat. id” 


]) 


axios.delete("/api/deleteData", { 
data: { 
id: objIdToDelete 


// updateDB 函数 用 于 调用 后 台 API 更 新 数据 库 中 已 经 存在 的 数据 
updateDB = (idToUpdate, updateToApply) => { 
let objIdToUpdate = null; 
// 遍历 数据 
this.state.data.forEach(dat => { 
if (dat.id == idToUpdate) { 
objIdToUpdate = dat. id; 
} 
1); 
// 更 新 数据 
axios.post ("/api/updateData", { 
id: objIdToUpdate, 
update: { message: updateToApply } 


// 泻 染 UI 的 核心 方法 
// 该 泻 染 函数 泻 染 的 内 容 与 前 台 界 面 展示 一 致 
render() { 
const { data = [] } = this.state; 
console.log('data', data) 
return ( 
<div style={{ width: 990, margin: 20 }}> 
<List 
itemLayout="horizontal" 
datasource={data} 
renderItem={item => ( 


<List.Item> 
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<List.Item.Meta 
avatar={<Avatar src="https://gw.alicdn.com/tfs/ 
TB1Hup .wa6qK1lRj]SZFmXXX0PFXa-1024-1024.jpg" />} 
title={<span>{ ` 创 建 时 间 : ${item.createdaAt}`}</span>} 
description={`${item.id}: ${item.message}.} 
人 
</List.Item> 
)} 
> 
<Card 
title=" 新 增 笔 记 " 
style={{ padding: 10, margin: 10 }}> 
<Input 
onChange={e => this.setState({ message: e.target.value })} 
placeholder=" 请 输入 笔记 内 容 " 
style={{ width: 200 }} /> 
<Button 
type="primary" 
style={{ margin: 20 }} 
onClick={ () => this.putDataToDB (this.state.message)} 
> 添加 </Button> 
</Card> 
<Card 
title=" 删 除 笔记 " 
style={{ padding: 10, margin: 10 }}> 
<Input 
style={{ width: "200px" }} 
onChange={e => this.setState({ idToDelete: e.target.value })} 
placeholder=" 填 写 所 需 删除 的 ID" 
/> 
<Button 
type="primary" 
style={{ margin: 20 }} 
‘onClick={() => this.deleteFromDB (this.state.idToDelete)} 
> 删除 </Button> 
</Card> 
<Card 
title=" 更 新 笔记 " 
style={{ padding: 10, margin: 10 }}> 
<Input 
style={{ width: 200, marginRight: 10 }} 
placeholder=" 所 需 更 新 的 ID" 
onChange={e => this.setstate({ idToUpdate: e.target.value })} 
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We 

<Input 
style={{ width: 200 }} 
onChange={e => this.setState({ updateToApply: e.target.value })} 
placeholder=" 请 输入 所 需 更 新 的 内 容 " 

J 

<Button 
type="primary" 
style={{ margin: 20 }} 
onClick={ () => 

this.updateDB (this.state.idToUpdate, this.state.updateToApply) 

} 

> 更 新 </Button> 

</Card> 
</div> 
); 


export default App; 


本 例 最 终 效果 如 图 13-13 所 示 。 


< CG © localhost QQ 让 ”OO@ee 四 四 
国名 中 则 2018-12-15T07'20'37.3527 
国外 间 2018-12-15T084158.485z 

新 增 笔记 

删除 笔记 

更 新 笔记 


图 13-13 简易 笔记 本 最 终 展示 效果 
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案例 小 结 


本 章 介绍 了 如 何 搭建 一 个 简易 的 笔记 本 , 仅 实现 了 增 、 删 、 改 、 查 的 简易 功能 ， 后 续 还 有 
诸多 功能 需要 完善 ， 例 如 用 户 管理 、 笔 记分 享 等 扩展 功能 ， 有 待 于 读者 自行 完成 。 
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React 实 战 : 
React+webpack+ES6 实 现 购物 车 


章 介绍 如 何 使 用 React 实现 购物 车 。 此 购物 车 使 用 create-react-app 创建 项 目 模板 , 使 用 
antd 框架 中 的 字体 图 标 。 


前 期 准备 


14.1.1 环境 准备 

基于 webpack 和 ES6 结合 开发 前 端 React 应 用 ， 我 们 仍 继续 使 用 create-react-app 创建 项 
目 模板 ， 首 先 安装 create-react-app: 

npm install -g create-react-app 

安装 完成 之 后 ， 使 用 下 面 的 命令 创建 和 初始 化 项 目 模板 : 


create-react-app shopping app 
cd shopping app 


会 发 现 自动 创建 了 shopping app 目录 ， 这 时 可 以 使 用 如 下 命令 运行 并 开发 应 用 : 

npm start 

默认 情况 下 ， 在 开发 环境 下 会 启动 一 个 服务 器 ， 监 听 在 3000 端口 ， 启 动 成 功 会 自动 打开 
浏览 器 ， 可 以 立刻 看 到 这 个 App 的 默认 效果 ， 如 图 14-1 所 示 。 
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Edit src/App. js and save to reload. 


图 14-1 初始 化 项 目 预览 效果 


14.1.2 ”编码 规范 ESLint 

形成 代码 规范 的 目的 是 编写 高 可 维护 性 的 前 端 代码 , 提升 协作 和 维护 效率 , 不 论 是 对 开发 
思路 扩展 还 是 开源 项 目 都 有 非常 大 的 价值 。 这 里 强调 代码 规范 , 是 因为 规范 的 代码 可 以 促进 团 
队 合作 、 减 少 缺陷 的 处 理 复杂 性 、 降 低 维 护 成 本 、 有 助 于 代码 审查 ， 同 时 规范 的 代码 有 助 于 促 
进 开 发 者 自身 的 成 长 。 

ESLint 是 一 个 语法 规则 和 代码 风格 的 检查 工具 ， 可 以 用 来 保证 写 出 语法 正确 、 风 格 统一 
的 代码 。ESLint 配置 中 的 规则 之 间 都 是 独立 的 ， 开 发 者 既 可 以 使 用 默认 配置 ， 也 可 以 根据 项 
目的 需要 进行 定制 化 配置 。 

首先 全 局 安装 ESLint: 

npm install -g eslint 

接着 初始 化 配置 文件 : 

eslint -init 


此 时 可 以 选择 自己 所 需 的 代码 风格 。ESLint 官方 文档 做 了 详细 的 规则 说 明 ， 详 细 的 配置 
请 查看 http://eslint.org/docs/user-guide/configuring。 
ESLint 代码 规范 配置 示例 如 下 : 
module.exports = { 
1 oh ed 玫 
"browser": true, 
"commonjs": true, 
"es6": true 
}, 
"extends": "eslint:recommended”， // 可 以 选择 一 些 流行 的 style 如 airbnb 
"parserOptions": { 


"ecmaFeatures": { 
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"experimentalobJjectRestSpread": true, 
"jszx": true 
}, 
"ecmaVersion": 7, // ECMRScript 版 本 
"sourceType": "module" 
}, 
"plugins": [ 
react” // 插 件 ， 支 持 react 


EE 
AQaent al[ // 缩 进 
werror” , // 可 选项 为 off warn error， 对 应 的 数字 为 0 1 2 
"space" 
7 
"linebreak-style": [ // 换 行 style 
we 
"unix" 
"quotes": [ // 引号 ， 是 单 引号 还 是 双 引 号 
"error", 
"single" 
7 
"semi": [ 
"error", 


nover™ 


] 7 
ESLint 规范 禁止 在 条 件 语句 (if,while.do...while〉 中 出 现 赋值 操作 : 
// bad 


if (user.jobTitle = "manager") { 
// user.jobTitle is now incorrect 


// good 
if (user.jobTitle == "manager") { 
// dosomething()... 
} 
注意 ， 该 规则 有 一 个 字符 串 选项 ， 默 认 是 “except-parens”， 人 允许 出 现 赋 值 操作 ， 但 必须 
是 被 圆 括号 括 起 来 的 ， 设 置 为 “always” 表 示 禁 止 在 条 件 语句 中 出 现 赋值 语句 。 


// bad 设置 为 except-parens 
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function setHeight (someNode) { 
nuse strict™s 
do 
someNode.height = "100px"; 
} while (someNode = someNode.parentNode); 


// good 设置 为 except-parens 
Var x 
if (x === 0) { 
var b = 17 
} 
// 设置 高 度 
function setHeight (someNode) { 
"use strict"; 
do 1{ 
someNode .height = "100px"; 
} while ((someNode = someNode.parentNode)); 


禁止 在 代码 中 使 用 console (在 产品 发 布 之 前 ,剔除 console 的 调用 )， 注意 可 以 设置 allow 
参数 允许 console 对 象 方法 : 

// bad 

console.1og("Log a debug level message."); 


console.warn("Log a warn level message."); 
console.error ("Log an error level message.") 


// good 
// 自 定义 的 Console 
Console.1log("Log a debug level message."); 


禁止 在 条 件 语句 〈forifwhile,do...while) 和 三 元 表达 式 〈?:) 中 使 用 常量 表达 式 ， 可 以 通 
过 设置 checkLoops 参数 来 表示 是 否 允 许 使 用 常量 表达 式 : 
// bad 


if (false) { 
dosomething(); 
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不 允许 在 函数 〈function) 定义 里 面 出 现 重复 的 参数 〈 箭 头 函数 和 类 方法 设置 重复 参数 会 
报错 ， 但 跟 该 规则 无 关 ) : 
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不 允许 出 现 空 块 语句 ， 但 可 以 通过 allowEmptyCatch 为 true 允许 出 现 空 的 catch 子 句 : 


本 章 介 绍 的 购物 车 项 目 使 用 的 ESLint 配置 示例 如 下 : 
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"react/jsx-closing-bracket-location": [ 
1, 
wafter-props" 
]， 
"no-new": 1, 
"new-cap": [ 
"warn™, 
{ 
"capIsNewExceptions": [ 
"CSSModules" 


} 
], 
"max-len": 0, 
"no-else-return": 0, 


"eqeqeq": 0, 
"jsx-ally/img-has-alt": [ 
0 


]， 
warray-callback-return": 0, 
nopLluspluses OA 
"prefer-arrow-callback": 0, 
"no-bitwise": 0, 
"no-restricted-properties": 0, 
"react/no-unescaped-entities": 0, 
"react/no-unused-state": 0, 
"no-continue": 0, 
"import/prefer-default-export": 0, 
NMOLoop -Ene 0 
"no-empty": [ 

arror™s 

而 

"allowEmptyCatch": true 

} 
]， 
"react/no-find-dom-node": 0, 
"no-cond-assign": 0, 
"react/no-multi-comp": 0, 
"react/prop-types": 0, 
"react/jsx-filename-extension": 0, 
"import/extensions": 0, 
"import/no-unresolved": 0, 


"semi": 0, 


React+webpack+ES6 实现 购物 车 
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"linebreak-style": "off" 


} 

开发 者 可 根据 需要 定制 不 同 的 规则 。 注意 GitHub 开启 了 提交 之 前 ESLint 检测 规则 ， 因 此 
项 目 必须 配置 ESLint 才 可 以 提交 ， 否 则 会 有 warming， 但 可 以 使 用 git commit -na 跳 过 检测 ， 
不 过 不 推荐 跳 过 ESLint 检测 。 


14.1.3 项目 结构 
准备 好 的 项 目 结构 如 下 : 


.babelrc 
.editorconfig 
.eslintrc 

“git 

.gitignore 
package.json 
index.js 
index.css 
index.html 
webpack.config.js 


| 一 public 


lare 

FF sre 

Cartejs 

constants.js 
EmptyCart .js 
ProductsContainer.js 


| 

jl 

jl 

ll 

ll 

We Search.js 
Wel Shopping.js 
I DiEMTS NS 
jl 

| | 一 constants 

I ActionTypes.js 
jl 

| Limages 

| 

一 test 


由 于 涉及 大 量 的 ES6 等 新 属性 ， 因 此 Nodejs 必须 是 10.0.0 以 上 版 本 。 购 物 车 项 目 预计 
所 需 的 功能 如 图 14-2 所 示 。 
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EC 


商品 搜索 加 入 购物 车 国 购物 车 详情 辆 商品 结算 


图 14-2 ”购物 车 功能 设计 


14.2 组 件 设计 


14.2.1 ”购物 车 框架 
首先 在 src 文件 夹 创建 Shopping 文件 ，Shopping 作为 购物 车 的 整体 框架 : 


// src/Shopping.js 
import React, { Component } from 'react'; 
// 引入 antd 组 件 
import { 
Row, 
Gols 
} from "antd'7 
// 引入 购物 车 组 件 
import Cart from './Cart'; // 购物 车 
// 引入 商品 列表 
import ProductsContainer from './ProductsContainer'; // 商品 列表 
// 引入 商品 搜索 


import Search from './Search'; // 商品 搜索 

// 引入 静态 数据 

import { 
allProducts, // 所 有 商品 
filterProducts, // 实际 展示 的 商品 
productsModel, // 商品 模型 
allQuantity, // 原 有 库存 
selectQuantity, // 加 入 购物 车 的 数量 

} from './constants' 

// 定义 购物 车 应 用 


class Shopping extends Component { 
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constructor() { 
Super (); 
THis atate = 
qty: allQuantity, 
products: allProducts, 
selectProducts: [], 
selectQty: selectQuantity, 
filterProducts, 
} 
// 绑 定 相关 事件 
this .searchItem = this.searchItem.bind(this) 
this .handleRemove = this.handleRemove.bind(this) 
this.addCcart = this.addCcart.-bind(this) 
} 
/** 
* 加 入 购物 车 
入 
addcart (index) { 
const currentQty = this.state.qty; 
const selQty = this.state.selectQty; 
const indexNum = index / 1; 
// 若 库存 充足 ， 则 购物 车 数量 增加 1 
// 若 库存 不 足 ， 则 提示 用 户 已 售 可 
if (currentQty[indexNum] > 0) { 
currentQty[indexNum] ——; 
selQty[indexNum] ++; 
} else { 


alert (' 很 抱歉 ， 己 售 整 ! ') 


const { 
selectProducts, 
products, 

} = this.state; 


const cart = selectProductss 
const item = products[indexNum]; 
cart.push (item.name); 
// 更 新 状态 ， 触 发 界面 更 新 
this.setState({ 
selectProducts: carts 
selectQty: selQty, 
qty: currentQty 
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}) 
} 
/** 
* 搜索 商品 
i 
searchItem(itemName) { 
let finditem = false; 
// 入 参 为 空 处 理 
if (itemName == '') { 
this.setstate({ 
filterProducts: productsModel 
1D); 
} else { 
// 在 已 有 商品 中 检索 
for (let i = 0; i < productsModel.length; i++) { 
if (productsModel[i] .name == itemName) { 
const tmpProducts = []; 
tmpProducts.push (productsModel [i]); 
// 已 找到 商品 ， 则 更 新 状态 
this.setState({ filterProducts: tmpProducts }); 
finditem = true; 
break; 


| 
// 若 未 找到 商品 ， 则 提示 商品 不 存在 
if (!finditem) { 
this .setState({ 
filterProducts: [] 
1); 


} 
/** 
* 从 购物 车 中 删除 
handleRemove (quantity, id) { 
const originalQty = [10, 8, 15, 5]; 
const selProducts = this.state.selectProducts; 
const pname = productsModel [id] .name; 
for (let i = 0; i < selProducts.length; i++) { 
const index = selProducts .indexof (pname); 
if (index > -1) 1{ 


selProducts.splice (index, 1); 
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在 总 入 口 文件 中 引入 Shopping 组 件 : 


// index.js 
import React from "Feact'7 
import ReactDOM from 'react-dom'; 
import Shopping from './src/Shopping'; 
import './index.css'; 
// 入 口 APP 定义 
function App() { 
return ( 
<div style={{ margin: 100 }}> 
<Shopping /> 
</div> 
下 


ReactDOM.render (<App />，document .getElementById('root'))7 


HTML 文件 内 容 : 


// index.html 
<!DOCTYPE html> 
<html lang="en"> 


<head> 

<meta charset="UTF-8"> 

<title>Demo</title> 

<link rel="stylesheet" href="index.css" /> 
</head> 
<body> 


<div id="root"></div> 

<script src="common.j]s"></script> 
<script src="index.js"></script> 
</body> 

</html> 


14.2.2 ”商品 组 件 和 商品 列表 
在 src 文件 夹 下 创建 constants.js 文件 ， 输 出 静态 商品 数据 : 


// src/constants.js 
/** 

* 全 部 商品 数据 

a 


export const allProducts = [{ 
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Lndeiws "0", 
path: 'https://gw.alicdn.com/tfs/TBIUPdCWwAPOK1RjSZKPbXXX1IXXa-1200-800.jpg', 
name: "apple', 
price: '4.99°', 
quantity: 10 
| | 
index: '1', 
path: 'https://gw.alicdn.com/tfs/TB1LrAcwpYqK1lRjSZLeXXbXppXa-1200-901.jpg', 
name: "pear’, 
Eee S350, 
quantity: 8 
Fr 
index: "2", 
path: 'https://gw.alicdn.com/tfs/TBIDUVcwwHqK1RjSZFgXXa7JXXa-788-473.jpg', 
name: 'watermelen', 
Brice:, "6.09 
quantity: 15 
| 
index: '3', 
path: 'https://gw.alicdn.com/tfs/TB15SpewAvoK1RjSZFDXXXY3pXa-1200-800.jpg', 
name: 'banana', 
DrLco 2 09 
quantity: 5 
}, { 
dndexs "4 
path: 'https://gw.alicdn.com/tfs/TBlhqhswwHqK1lRjSZJnXXbNLpXa-1000-669.jpg', 
name: "kiwi berry', 
Drice 0 To 
quantity: 9 
(i! 
indexs “577 
path: 'https://gw.alicdn.com/tfs/TB13plpwq6qKlRjSZFmXXX0PFXa-1200-797.jpg', 
name: 'pineapple', 
price: rrl2sT9r7 
quantity: 20 
}] 


/** 
* 过 滤 的 商品 数据 
全 这 
export const filterProducts = [{ 
ndex ROY 
path: 'https://gw.alicdn.com/tfs/TB1UPdcwAPOK1RjSZKbXXX1IXXa-1200-800.jpg', 
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name: "apple'， 
Price: '4.99" 
| 
I 
path: 'https://gw.alicdn.com/tfs/TB1Lr4cwpYqK1lRjSZLeXXbXxppXa-1200-901.jpg', 
name: "pear’, 
beices "3.59% 
}, { 
Ende 2 
path: 'https://gw.alicdn.com/tfs/TBIDUVcwwHIqK1RjSZFgXXa7JXXa-788-473.jpg', 
name: 'watermelen', 
Price: '6.99" 
| | 
jndex U3 
path: 'https://gw.alicdn.com/tfs/TB15SpewAvoK1RjSZFDXXXY3pXa-1200-800.jpg', 
name: 'banana', 
Drlcge M2 
| 
index: '4', 
path: 'https://gw.alicdn.com/tfs/TBlhqhswwHqK1lRjSZJnXXbNLpXa-1000-669.jpg', 
name: 'kiwi berry', 
Drlices "68°19 
| 
Lndexs 5, 
path: 'https://gw.alicdn.com/tfs/TB13plpwq6qK1RjSZFmXXX0PFXa-1200-797.jpg', 
name: 'pineapple', 
Brice2 IC ES 
quantity: 20 
}] 


/六 广 
* 商品 模型 
export const productsModel = [{ 
ndexs "0", 
path: 'https://gw.alicdn.com/tfs/TBIUPdcwAPOK1RjSZKPbXXX1IXXa-1200-800.jpg', 
name: "apple' 
jp | 
ORGexs “01 
path: 'https://gw.alicdn.com/tfs/TB1Lr4cwpYqK1lRjSZLeXXbxppXa-1200-901.jpg', 
name: 'pear' 
Fy 
index: '2°', 
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path: 'https://gw.alicdn.com/tfs/TBIDUVcwwHqK1Rj]SZFgXXa7JXXa-788-473.jpg', 
name: "watermelen'" 

| 
nders 3 
path: 'https://gw.alicdn.com/tfs/TB15SpewAvoK1RjSZFDXXXY3pXa-1200-800.jpg', 
name: "banana' 

pl 
index: "4", 
path: 'https://gw.alicdn.com/tfs/TBlhqhswwHqKlRjSZJNXXbNLpXa-1000-669.jpg', 
name: "kiwi berry'" 

| | 
index: 5, 
path: 'https://gw.alicdn.com/tfs/TB13plpwq6qK1lRjSZFmXXX0PFXa-1200-797.jpg', 
name: 'pineapple', 
prices Uo EO 
quantity: 20 

}] 


太太 

* 商品 库存 

人 

export const allQuantity = [10, 8, 15, 5, 9, 20]; 


/** 
* 加 入 购物 车 的 商品 数量 
六 
export const selectQuantity = [0, 0, 0, 0, 0, 0]; 


创建 商品 卡片 ， 在 src 文件 夹 下 创建 Iem.js 文件 : 


// src/Item.js 


import React, { 
Component 
} from 'react' 
import { 
Row, 
Button, 
Card, 


Erom "antous 


class Picframe extends Component { 
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onclick=T() => this handlecrickE(l)} 
type="primary"> 加 入 购物 车 </Button> 
</Row> 
{/* <div 
className="modal fade" 
id={popid} 
tabIndex="—1" 
role="dialog" 
aria-labelledby="myModalLabel" 
aria-hidden="true"> 
<div className="modal-dialog"> 
<img src={source} /> 
</div> 
</dLv> 1 
</Card> 


export default Picframe 


商品 卡片 效果 如 图 14-3 所 示 。 


kiwi berry 
剩余 库存 : 9 


图 14-3 商品 卡片 
在 src 文件 夹 下 创建 ProductsContainer.js 文件 ， 用 于 处 理 商 品 列 表 的 显示 : 
// 商品 列表 组 件 


// src/ProductsContainer.js 
// 引入 react 
import React from 'react" 


// 引入 antd 布局 组 件 
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import { 
Row, 
Card, 
PErom “antdvs 
// 引入 商品 卡片 组 件 
import Item from './item'; 
// 引入 数组 处 理 方法 
import { arrayChunk } from './utils'; 
// 商品 列表 
function ProductsContainer (props) 
// 获取 入 参 
// 商品 列表 、 库 存 、 加 入 购物 车 方法 


const { 


{ 


products, 
qty, 
addcart, 
} = props; 
// 对 商品 列表 拆 分 成 一 排 三 


const goodsList 


arrayChunk (products, 3); 
// 演 染 商品 列表 
if (products.length != 0) { 
return ( 
<div> 
{ 
goodsList.map((row, rIndex) => ( 
<Row 
type="flex" 
key={ “row-${rIindex}  }> 
{ 
row.map((item, index) => ( 
<Item 
addToCart={addCart} 
quantity={qty[item.index]} 
source={item.path} 
key={index} 
index={item.index} 
name={item.name} /> 
0 
} 
</Row> 
)) 


: React+webpack+ES6 实现 购物 车 
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</div> 


} 
return ( 
<Row> 
<Card style={{ marginTop: 10，width: 920 }}> 抱 次 ， 没 有 找到 商品 ! </Card> 


</Row> 


export default ProductsContainer 


为 了 让 商品 呈现 3 个 一 行 ， 使 用 到 数组 拆 分 方法 : 


export default { 
/** 
* @desc 在 数组 arr 中 取出 随机 count 项 
* @param {*} arr 数组 
* @param {*} count 要 取出 的 数据 长 度 
于 
getRandomaArraySlice (arr，count) { 
const newArr = [] .concat (arr) 7 
for (let i = 0, len = newArr.length; i < len; i++) { 
const x = Math.floor (Math.random()) * count; 
// swap 
const tmp = newArr[x]; 
newArr[x] = newArr[il]; 
newArr[i] = tmp; 
} 
return newArr.slice(0, count); 


}, 


/** 

* arrayChunk 方法 ， 把 一 个 数据 切 分 成 size 份 数 ， 支 持 不 够 的 时 候 自动 取 随机 数 进行 填充 
* @param {*} arr 数组 

* @param {*} size 要 切割 的 chunk size 

* @param {*} options 一 些 拓展 参数 。 比 如 是 否 进行 自动 补 全 

二 
arrayChunk(arr = [], size = 4, options) { 

let groups = []; 

if (arr && arr.length > 0) { 

groups = arr.map((e, i) => (i % size === 0 ? arr.slicel(i, i + size) 


null)) .filter(e => e); 
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if (options && options .autoComplete) { 
const lastIndex = groups.length - 1; 
if (lastIndex >= 0) { 
groups [lastIndex] = groups[lastIindex] .concat( 
this.getRandomArraySlice(arr.slice(0, size * lastIndex), size - 
groups[lastIndex] .length) 


} 
return groups; 
}, 


] 7 
商品 列表 效果 如 图 14-4 所 示 。 


apple pear watermelen 
制作 库存 : 10 惠 宁 库存: 8 惠 作 诺 存 ; 15 


banana kiwi berry pineapple 
出 作 诺 存 :5 届 人 不 :9 全 诛 存 :20 


EH Er Er 
图 14-4 商品 列表 


14.2.3 ”商品 搜索 


在 src 目录 下 创建 Searchjs 文件 ， 实 现 商品 搜索 : 
// 商品 搜索 组 件 


// src/Search.js 
import React, { 


Component 


Erom "neactrs 
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商品 搜索 效果 如 图 14-5 所 示 。 
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apple 
剩余 库存 : 10 


图 14-5 商品 搜索 组 件 


14.2.4 ”购物 车 
在 src 文件 夹 下 创建 EmptyCartjs 文件 ， 用 于 处 理 当 购物 车 中 无 商品 时 的 提示 : 


// 商品 不 存在 异常 提示 组 件 
// src/EmptyCart.js 


import React from 'react'; 
import { 

Card, 
} from "antd'" 


function EmptyCart() { 
return ( 
<Card style={{ marginTop: 10, width: 440 }}> 
<img 
style={{ width: 400 }} 
src="https://gw.alicdn.com/tfs/TB1UmzxrwwHqK1RjSZFEXXCGMXXa-658-444.gif" 
alt="empty-cart" /> 
<h3> 您 的 购物 车 还 是 空 的 ， 快 去 添加 商品 吧 ! </h3> 
</Card> 


export default EmptyCart; 


空 的 购物 车 效果 如 图 14-6 所 示 。 
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= 


QW 


您 的 购物 车 还 是 空 的 ， 快 去 添加 商品 吧 ! 


图 14-6 ”购物 车 为 空 
在 src 文件 夹 下 创建 Cartjs 文件 ， 用 于 显示 /隐藏 购物 车 以 及 购物 车 中 商品 价格 的 计算 : 


// 购物 车 组 件 
ASECXECaRESJS 


import React, { 
Component 
from react, 
// 引入 antd 布局 和 按钮 组 件 
import { 
Row, 
Card, 
Button, 
} from "antd'" 
import EmptyCart from './EmptyCart" 


class Cart extends Component { 
constructor(props) { 
super (props); 
this.state = { 
showCart: false, 
cance ll 
viewChanged: false 
} 
this.handleClick = this.handleClick.bind(this) 
this.handleRemove = this.handleRemove.bind(this) 
// 单 击 事件 
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handleClick() { 
setTimeout (() => { 
this.setstatel({ 
showCart: !this.state.showCart 
}) 
}, 0) 
} 
// 从 购物 车 删除 
handleRemove (product, index) { 
this.props.handleRemove (product, index); 
setTimeout (() => { 
this.setState({ 
showCart: !this.state.showCart 
}) 


}, 100); 
setTimeout (() => { 
this.setState({ 


showCart: !this.state.showCart 
}) 
Pr. 200Ns 
} 
// 泻 染 UI 
render() { 
const { 
showCart 
} = this.state; 
const { 
selectProducts, 
qty，// 数量 
pModel, 
} = this.props; 
let cartItems; 
const len = selectProducts.length; 
let totalPrice = 0; 


for (let i = 0; i < qty.length; i++) { 
totalPrice += pModel [i] .price * qty[i]; 
1 


if (len !== 0) { 
cartItems = qty.map((product, index) => { 
if (product === 0) { 


return null; 
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export default Cart 
我 的 购物 车 效果 如 图 14-7 所 示 。 


我 的 购物 车 
共计 : 12.97 元 


标题 : banana 
价格 : 2.99 


图 14-7 购物 车 商品 及 价格 统计 


1 4 .3 案例 小 结 


在 本 章 介绍 的 案例 中 ， 简 单 的 状态 通过 组 件 层 层 传递 ， 由 Shopping 到 ProductsContainer， 
再 到 Cart， 最 后 到 Item。 读 者 可 以 自行 尝试 引入 Redux 进行 状态 管理 ， 此 处 不 做 装 述 。 
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